在 JavaScript for 循环之后添加到 innerHTML

Question

所以我只是测试 JavaScript 的基本功能。我试图将 设定<li>在 之内，<ul>但由于某些简单的原因，我li被放置在 之外ul。

var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
    
test.innerHTML += '<ul>'; 
for (var i = 0; i < data[i]; i++)
{
test.innerHTML += '<li>' + i + '=' + data[i] + '</li>';
} 
test.innerHTML += '</ul>';

.start{
    border: 1px solid #000;
}  

  
     <div class="start" id="testdiv"></div>
  

目前的html结果如下所示：

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

如果能得到一个简单解释的预期结果，我们将不胜感激。

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

Answer 1

您可以使用以下一种方法，而不是使用上述方法。

可能的原因是浏览器可能会自动将结束标签添加到打开的标签中。

var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
var ulelement = document.createElement("ul");    
for (var i = 0; i < data[i]; i++)
{
ulelement.innerHTML += '<li>' + i + '=' + data[i] + '</li>';
} 
test.appendChild(ulelement);

.start{
    border: 1px solid #000;
}

<div class="start" id="testdiv"></div>

Answer 2

@MikeChristensen解释了innerHtml为什么在循环内使用是不好的做法for。

\n\n

\n

每次设置 \xc2\xa0innerHTML\xc2\xa0 时，都必须解析 HTML、构造 DOM 并将其插入到文档中。

\n

\n\n

尝试使用临时字符串变量：

\n\n

var myList = \'<ul>\';\nfor (var i = 0; i < data[i]; i++) { \n  myList += \'<li>\' + i + \'=\' + data[i] + \'</li>\'; \n} \nmyList += \'</ul>\';\ntest.innerHTML = myList;\n

\n