js添加多个子节点_使用javascript动态创建多个div与多个元素？
没有js，没有数组。但独立于所有那些，如果你想将元素添加到当前的DOM结构，首先，你需要创建它。无论你想var new_element = document.createElement('div')//might be p, span, ol, li, a, section etc.然后追加它。var my_container = document.getElementById("my-conta
没有js，没有数组。但独立于所有那些，
如果你想将元素添加到当前的DOM结构，
首先，你需要创建它。无论你想
var new_element = document.createElement('div')
//might be p, span, ol, li, a, section etc.
然后追加它。
var my_container = document.getElementById("my-container")
my_container.appendChild(new_element);
/*
* for most bottom of current dom node
* document.body.appencdChild(new_element)
*/
因此，您有一个对该元素的引用，您可以通过javascript设置属性。
new_element.setAttribute('id', 'new-element-id')
//
new_element.classList.add('lorem')
//
new_element.classList.add('ipsum')
//
如果你想添加多个元素，这也不难。
var giants = ['marx', 'engels', 'lenin']
for(i=0; i
var g = document.createElement('div');
g.setAttribute('id', giants[i]);
document.body.appendChild(g);
}
，或者更时尚
giants.forEach(function(e) {
var g = document.createElement('div');
g.setAttribute('id', e);
document.body.appendChild(g);
})
下面段将添加5周的div(包括图像和跨度和跨度文本)与一些数据。
insert_divs = function() {
var parent = document.getElementsByClassName("panel-body")[0];
var installments = ['Installment 1', 'Installment 2', 'Installment 3', 'Installment 4', 'Installment 5'];
installments.forEach(function(e){
var sp = document.createElement('span');
var img = document.createElement('img');
var installment = document.createElement('div');
var span_text = document.createTextNode(e);
sp.appendChild(span_text);
img.setAttribute('src', 'https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_cancel_48px-128.png')
installment.classList.add('panel-more1');
installment.appendChild(img);
installment.appendChild(sp);
parent.appendChild(installment);
});
}
window.onload = insert_divs
-
Shailendra Kushwah
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)