javascript - 循环元素javascript

Question

我一直在尝试找到创建元素和添加属性的正确方法，以便我可以在整个页面上循环它们(比如重复的图像或其他东西)，但这就是我能想到的全部。
有没有更好的最佳实践方式来做到这一点。我觉得有。我也觉得我这样做很便宜。

var i;
for (i=0; i < 100; i++) {
    var div = document.createElement("div");
    div.innerHTML = "<img src='images/mdn.png'>";
    document.body.appendChild(div);
}

谢谢大家，所有真正有用的答案，但我想我应该更具体。我正在尝试创建和图像元素，添加 src 属性以在正文中多次添加，以便我的页面充满小 Mozilla 头。 (也有一个 float :左风格哈哈)。 div 部分只是我从该站点获得的代码:https://www.javascripttutorial.net/javascript-dom/javascript-createelement/ .只有这样我才能弄清楚如何将元素相乘。

Answer 1

您可以做的不是每次都将其附加到正文中，而是创建一个文档片段并将其仅附加一次到正文中。最好的部分是 DocumentFragment 不会成为您事件 DOM 的一部分。如下图——

var i;
const fragment = new DocumentFragment();
for (i=0; i < 100; i++) {
    var div = document.createElement("div");
    div.innerHTML = "<img src='images/mdn.png'>";
    fragment.append(div);
}
document.body.appendChild(fragment);

您可以在此处阅读有关 DocumentFragment 的更多信息 https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment