创建多个元素

Question

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";

我想用不同的文本创建 4 个元素。班级需要保持不变。我想我正在用太多代码来做这件事。

也许有人知道如何使这段代码看起来更漂亮、更高效？

最良好的祝愿，谢谢！

原文由 xoomer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您多次执行 相同的操作，请使用 循环。 将 不同的文本存储在一个 数组 中并使用 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);
});

或者使用 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);
}

演示

原文由 user3589620 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我相信更好的方法是仅使用一次更新 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

原文由 Eyal Ofri 发布，翻译遵循 CC BY-SA 3.0 许可协议