为什么 innerHTML 在 for 循环中不能正常工作？答案

【问题标题】：Why innerHTML doesnt work correctly in for loop?为什么 innerHTML 在 for 循环中不能正常工作？
【发布时间】：2014-10-15 09:36:53
【问题描述】：

这有什么区别

var content= "";

for (i = 1; i <= 3; i++) {
    content = content + '<fieldset>' + '<legend>Grup ' + i + '</legend>';

    for (j = 1; j <= 5; j++) {
        content = content + '<div class="item"> item ' + i + ',' + j + '</div>';
    }

    content = content + '</fieldset>';
}

div.innerHTML = content;

还有这个

for (i = 1; i <= 3; i++) {
    div.innerHTML = div.innerHTML + '<fieldset>' + '<legend>Grup ' + i + '</legend>';

    for (j = 1; j <= 5; j++) {
        div.innerHTML = div.innerHTML + '<div class="item"> item ' + i + ',' + j + '</div>';
    }

    div.innerHTML = div.innerHTML + '</fieldset>';      
}

我尝试了所有两种方法。但是第二个没有按我的预期工作。当我在 for 循环中使用 div.innerHTML 时，内部循环在之后工作，输出如下：

<fieldset> 
    <legend>Grup x</legend>
</fieldset>
<div class="item"> item 1,1 </div>
<div class="item"> item 1,2 </div>
....

您可以在http://mutlakyazilim.com/test.html 测试该问题。为什么它们不同，有人知道吗？

【问题讨论】：

首选第一个。每次修改 div 的 innerhtml 时，都会强制浏览器重新渲染 div。最好将您的 html 构建为字符串 (content)，然后一次性将其全部填充到 DOM 中。

标签： javascript html for-loop asynchronous innerhtml

【解决方案1】：

这是因为innerHTML 是 HTML 元素的一个特殊属性，当您获取或设置它时它具有特殊的行为。

当你得到它时（例如通过var x = el.innerHTML），将运行序列化算法，将 DOM 子树转换为 HTML 文本。

当您设置它时（例如通过el.innerHTML = el.innerHTML + '<html code>'），文本将通过 html 解析器发送并设置为子元素（如果该元素）。

在你的情况下，你正在做这样的事情：

div.innerHTML = div.innerHTML + '<fieldset>';

假设div.innerHTML 最初为空，代码解析为：

div.innerHTML = '<fieldset>';

这实际上是通过解析器发送的，解析器生成的html相当于：

<fieldset></fieldset>

这使得这段代码与众不同。

您可以运行一个简单的测试来确认这一点：

document.body.innerHTML = '<div>';
console.log(document.body.innerHTML); // should be `<div></div>`

【讨论】：

首先感谢您提供最佳答案。出于同样的原因，我看不到手动添加的“”标签..

【解决方案2】：

content 最初是空的，但 div 的 innerHTML 不是。

您可以更改此行以获得所需的结果：

div.innerHTML += content;
//            ^ here

【讨论】：

谢谢先回答。我用 'div.innerHTML=""' 制作了空的 innerHTML，并将所有 'div.innerHTML = div.innerHTML + ...' 替换为 'div.innerHTML += ...' 但结果没有改变。