javascript 创建多个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32670902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create multiple elements
提问by xoomer
JavaScript
JavaScript
var textBlock = document.createElement('div');
textBlock.setAttribute('class', 'finalBlock');
var addFinalBlock = document.getElementsByClassName('block')[0];
addFinalBlock.appendChild(textBlock);
textBlock.innerHTML = "Make this block a text block";
// -------
var textBlock2 = document.createElement('div');
textBlock2.setAttribute('class', 'finalBlock');
var addFinalBlock2 = document.getElementsByClassName('block')[0];
addFinalBlock2.appendChild(textBlock2);
textBlock2.innerHTML = "Make this block a text block2";
// -------
var textBlock3 = document.createElement('div');
textBlock3.setAttribute('class', 'finalBlock');
var addFinalBlock3 = document.getElementsByClassName('block')[0];
addFinalBlock3.appendChild(textBlock3);
textBlock3.innerHTML = "Make this block a text block3";
// -------
var textBlock4 = document.createElement('div');
textBlock4.setAttribute('class', 'finalBlock');
var addFinalBlock4 = document.getElementsByClassName('block')[0];
addFinalBlock4.appendChild(textBlock4);
textBlock4.innerHTML = "Make this block a text block4";
I want to create 4 elements with different text. The class needs to remain the same. I think I am doing this with to much code.
我想用不同的文本创建 4 个元素。类需要保持不变。我想我正在用很多代码来做这件事。
Maybe anyone has some information how to make this code look more beautiful and more efficient?
也许有人知道如何让这段代码看起来更漂亮更高效？
Best wishes and thank you!
最好的祝福和感谢！
回答by Sun
If you do the same thingsa lot of times, use a loop. Storethe different text in an arrayand go through it with forEach:
如果您多次执行相同的操作，请使用循环。将不同的文本存储在一个数组中并使用forEach遍历它：
var text = ["text1", "tex2", "text3", "text4"];
text.forEach(function(el) {
var div = document.createElement("div");
div.className = "finalBlock";
div.innerHTML = el;
document.body.appendChild(div);
});
or with a for loop:
或使用for 循环：
var text = ["text1", "tex2", "text3", "text4"];
for(var i = 0; i < text.length; i += 1) {
var div = document.createElement("div");
div.className = "finalBlock";
div.innerHTML = text[i];
document.body.appendChild(div);
}
回答by Eyal Ofri
I believe a better approach will be to only update the DOM once using fragment.
我相信更好的方法是只更新一次 DOM 使用fragment.
var docFrag = document.createDocumentFragment();
for(var i = 0; i < divs.length; i++) {
docFrag.appendChild(divs[i]); // Note that this does NOT go to the DOM
}
document.body.appendChild(docFrag); // Appends all divs at once
回答by Rohit Parte
This code will work fine. If you want to add multiple elements on same HTML tag.
此代码将正常工作。如果你想在同一个 HTML 标签上添加多个元素。
var element1= "<br/>"
var element2="<input type='text' />"
var element3= "<br/>"
var onLine = document.getElementById("onLine"); /* This is <ul id="onLine"></ul> */
var on = document.createElement("div");
on.innerHTML = element1+ element3+ element3
on.setAttribute("style", "background-color:rgba(0, 0,
0, 0.3);color:white;border-radius:40px;margin-
bottom:30px;padding: 10px;width: 230px;");
on.appendChild(document.createTextNode('Custom text'));
onLine.appendChild(on);
