1

使用 Javascript，我从 XML 文档中提取了一个值，并尝试生成与提取的值一样多的标签。我假设我会使用 for 循环来执行此操作，但是当我尝试此操作时，它只会显示一个图像。

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

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

4

4 回答 4

4

使用字符串连接：

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

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

于 2013-06-17T15:01:59.627 回答
2

好吧，如果您从逻辑上考虑它，您编写的代码似乎是让 red 的 innerHTML 更改“red”次数。您没有添加 img“红色”时间，您只是将其更改为一个图像“红色”时间。

所以，你为什么不这样做：

var numberImages= "";

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

document.getElementById("red").innerHTML= numberImages;
于 2013-06-17T15:08:27.693 回答
1

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

请改用以下内容。

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


       elem.innerHTML = elem.innerHTML+"<img src='slike/red.png'></img>";
    }
于 2013-06-17T15:04:33.793 回答
0

如果您要向 DOM 添加大量元素，您应该使用 aDocumentFragment来避免任何不必要的重排。这是一个简单的例子（和一个小提琴）：

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 一次。

于 2013-06-17T19:55:00.730 回答