在 JavaScript for 循环之后添加到 innerHTML

Posted 2023-05-07

【中文标题】在 JavaScript for 循环之后添加到 innerHTML

【英文标题】：adding to innerHTML after JavaScript for loop

【发布时间】：2018-06-18 13:03:11

【问题描述】：

所以我只是在 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>

【问题讨论】：

您正在写入 DOM，而不是文档文件。在 DOM 中，您只能创建整个元素，并且它们会被一次性放置到 DOM 中。

用 innerHTML 构建 html 不像构建一个字符串。当你只是做test.innerHTML += '<ul>';浏览器实际上是这样做的：test.innerHTML += '<ul></ul>';所以它被关闭了。

感谢@epascarello 我现在实际测试了它并意识到发生了什么感谢您的解释。

【参考方案1】：

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

每次设置 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;

【讨论】：

@Ylama ，我看到了您的其他问题。但我现在没有看到消息。您还有问题还是您自己解决了？

是的@Alexander 请帮助我理解，为什么如果myList 是循环的一部分只添加一次？您的回答器完全 100% 正确，我想要的只是让我感到困惑的是，“li”被填充了 5 次，ul 被填充了一次，但它们在同一个循环中，希望我问什么有意义？

var myList = '<ul>' 设置初始累加器值。然后myList 与<li>...</li> 连接，用于data 数组的每个元素（请参阅+=assignment operator）。最后，我们附加关闭 ` 标记并将累积的字符串插入 HTML 块。我的代码和你的一样，但我先构建字符串，然后将其写入 HTML。

感谢@Alexander，现在我明白了很多！

【参考方案2】：

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

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

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>

【讨论】：

不错的有趣方法，感谢您的帮助，所以浏览器会自动广告结束标签？

实际上对其进行了测试，它确实自动添加了结束tag..所以我的方法是错误的，但我实际上把这本书拿出来了，不明白为什么它不起作用。

【参考方案3】：

改用appendChild() 方法：

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)

.start
    border: 1px solid #000;

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

【参考方案4】：

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

我更改了我的代码 来自

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

收件人

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

我的问题解决了。