[英]Create elements in javascript dynamically
我如何在javascript中動態創建這樣的元素,因為我想在獲取數據庫中的內容時對其進行循環。
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/office.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
外觀如下: http : //materializecss.com/cards.html#reveal
我嘗試在互聯網上搜索,但發現只動態地創建了一個帶有子元素的元素。 請幫我這是我的機器項目,我們的教授甚至都沒有考慮過javascript,我正在盲目地研究它。 我設法創建了一些JavaScript,例如函數。 抱歉,我的帖子很長。
使用jQuery:
為了簡單起見,僅將酥油:
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/office.jpg">
</div>
<p>other</p>
</div>
嘗試
$('<div>').class('card').append(
$('<div>').class('card-image waves-effect').append(
$('<img>').class('activator').src('images/office.jpg'),
$('<p>').text(other)
)
);
或使用純Javascript嘗試:
var div=document.createElement('div');
div.className='card';
var div2=document.createElement('div');
div.appendChild(div2);
etc...
由於@Emilio,我已成功將html元素轉換為jquery
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
var card = $('<div>', { class: 'row' }).append($('<div>', { class: 'col s4' }).append($('<div>', { class: 'card' }).append(
$('<div>', { class: 'card-image waves-effect waves-block waves-light' }).append(
$('<img>', { class: 'activator', src: 'img/products/Xiaomi-Mi-4.jpg'})
), $('<div>', { class: 'card-content' }).append(
$('<span>', { class: 'card-title activator grey-text text-darken-4', text: 'Card Title' }).append($('<i>', { class: 'material-icons right' }).text('more_vert'))
, $('<p>').append($('<a>', { href: '#' }).text('This is Link'))
), $('<div>', { class: 'card-reveal' }).append($('<span>', { class: 'card-title activator grey-text text-darken-4', text: 'Card Title' }).append($('<i>', { class: 'material-icons right' }).text('close')), $('<p>').text('Here is some more information about this product that is only revealed once clicked on.'))
)))
$(document.body).append(card);
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.