Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

@MikeChristensen explains为什么在innerHtml循环中使用for是不好的做法。

每次设置innerHTML时，都必须解析HTML，构建DOM并插入到文档中。

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

var myList = '<ul>';
for (var i = 0; i < data[i]; i++) { 
  myList += '<li>' + i + '=' + data[i] + '</li>'; 
} 
myList += '</ul>';
test.innerHTML = myList;

Answer 3

改为使用appendChild()方法：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

在我的情况下，我遇到了 li 最后一个元素没有填充的问题。

我更改了代码来自

$('.ul_food_item').innerHTML = li_elem_new;

致

$('.ul_food_item').html(li_elem_new);

我的问题解决了。

在JavaScript for循环之后添加到innerHTML

4 个答案: