Question

使用Javascript，我从XML文档中提取了一个值，并且我正在尝试生成与我所提取的值一样多的标记。我假设我会使用for循环来做这个，但是当我尝试这个时，它只会显示一个图像。

for(i=0; i<red; i++){
   document.getElementById("red").innerHTML = "<img src='slike/red.png'></img>";
}

我知道为什么这不起作用，但我自己找不到解决方案，所以我想知道我需要什么Javascript功能？

Answer 1

使用字符串连接：

html = '';
for(i=0; i<red; i++){
   html += "<img src='slike/red.png'></img>";
}
document.getElementById("red").innerHTML = html;

在循环中分配给+=时也可以使用.innerHTML，但效率较低，因为浏览器每次都必须格式化和重新分析DIV内容。最好一举做好。

Answer 2

好吧，如果从逻辑上考虑它，你编码的内容似乎是红色的innerHTML改变“红色”次数。你没有添加img“红色”次，你只是将它改为一个图像“红色”次。

那么，你为什么不这样做呢？

var numberImages= "";

for(i=0; i<red; i++){
    numberImages += "<img src='slike/red.png' />";
} 

document.getElementById("red").innerHTML= numberImages;

Answer 3

每次为元素的innerHTML分配单个值。

使用以下代替。

var elem=document.getElementById("red");
for(i=0; i<red; i++){


       elem.innerHTML = elem.innerHTML+"<img src='slike/red.png'></img>";
    }

Answer 4

如果你要向DOM添加大量元素，你应该使用DocumentFragment来避免任何不必要的回流。这是一个快速示例（and a fiddle）：

var fragment = document.createDocumentFragment();

for (var i = 0; i < 10; i++)
{
    var img = document.createElement('img');
    img.src = 'slike/red.png';

    fragment.appendChild(img);
}

document.getElementById('red').appendChild(fragment);

这允许您做的是创建所需数量的元素，并将它们批量添加到DOM中，这只会重新生成DOM一次。

如何将多个HTML标记添加到一个div中

4 个答案: