为啥 innerHTML 在 for 循环中不能正常工作？
Posted
技术标签:
【中文标题】为啥 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 中。
【参考方案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 += ...' 但结果没有改变。以上是关于为啥 innerHTML 在 for 循环中不能正常工作？的主要内容，如果未能解决你的问题，请参考以下文章
为啥我不能用 `var output = document.getElementById('message').innerHTML;` 做一个循环