JavaScript循环操作innerHTML时<li>被置于<ul>外部的问题

为什么<li>会跑到<ul>外面？ #

这是因为每次修改innerHTML时，浏览器都会立即把字符串解析成完整的DOM结构。当你执行test.innerHTML += '<ul>'的时候，浏览器发现这是一个未闭合的<ul>标签，会自动帮你补全成<ul></ul>——此时<ul>已经是一个闭合的元素了。后续循环里添加的<li>自然就被放到了<ul>的外面，而不是内部。

另外还要提一句：你原代码里的循环条件i < data[i]是错误的，当i=4时data[i]=5，循环会继续到i=5，此时data[5]是undefined，应该改成i < data.length才能正确遍历整个数组。

解决方法 #

这里有两种常用的解决方案：

方案1：先拼接完整HTML字符串，再一次性赋值

这种方法避免了多次修改innerHTML导致的DOM重复解析，性能更优：

var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
// 先构建完整的HTML片段
var html = '<ul>';
for (var i = 0; i < data.length; i++) {
    html += '<li>' + i + '=' + data[i] + '</li>';
}
html += '</ul>';
// 一次性赋值给innerHTML
test.innerHTML = html;

方案2：使用DOM API直接创建元素（更推荐）

这种方法直接操作DOM节点，不会有HTML自动补全的问题，也更适合复杂的DOM结构场景：

var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
// 创建ul元素
var ul = document.createElement('ul');
// 循环创建li并挂载到ul下
for (var i = 0; i < data.length; i++) {
    var li = document.createElement('li');
    li.textContent = i + '=' + data[i];
    ul.appendChild(li);
}
// 把ul添加到目标div中
test.appendChild(ul);

最终效果 #

两种方法都会生成你期望的HTML结构：

<div class="start" id="testdiv">
    <ul>
        <li>0=1</li>
        <li>1=2</li>
        <li>2=3</li>
        <li>3=4</li>
        <li>4=5</li>
    </ul>
</div>

内容的提问来源于stack exchange，提问作者Ylama