Question

这个

的区别是什么

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时，内部循环在＆lt; / fieldset＆gt;和输出就像：

<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测试该问题。他们为什么不同，有人有想法吗？

Answer 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>`

Answer 2

content最初为空，但innerHTML的{{1}}不是。

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

div

为什么innerHTML在for循环中无法正常工作？

2 个答案: