循环元素javascript - 编程之家

如何解决循环元素javascript

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

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头。（也带有浮点数：左样式大声笑）。 div部分只是我从此站点获得的代码：https://www.javascripttutorial.net/javascript-dom/javascript-createelement/。只有这样，我才能弄清楚如何将元素相乘。

解决方法

创建文档片段并将其仅附加到正文一次，而不是每次都将其附加到正文。最好的部分是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);

您可以在https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

上了解有关DocumentFragment的更多信息 ,

这有帮助吗？没有JS仅CSS重复。

body {
  background: url("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/1.png") repeat;
}

<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum."
</p><p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>

我知道的更简单，更干净的方法是：

Array(100).fill('div').forEach((item) => {
   const divElement = document.createElement(item);
   const imageElement = document.createElement('IMG');
   imageElement.setAttribute("src","IMAGE URL");
   imageElement.setAttribute("width","304");
   imageElement.setAttribute("height","228");
   imageElement.setAttribute("alt","The Pulpit Rock");
   divElement.appendChild(imageElement);

   document.body.appendChild(divElement);
})

通过这种方式，您可以制作自己的自定义图像，并且可以在div和image标签上设置自定义属性。

for(var i in array){
    console.log(array[i]);
}

我认为您找到了这种方式。但这也并不便宜您的代码。您可以将其用作代码。

您可以使用repeat

const div = document.createElement("div");
div.innerHTML = "<img src='images/mdn.png'>".repeat(100);
document.body.appendChild(div);