时间戳

首页 > 解决方案 > 动态创建 li 元素的替代方法

javascript - 动态创建 li 元素的替代方法

问题描述

使用 JavaScript，我需要动态创建一个列表，如下所示：

<ul id="list">
<li>2015</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ul>

“经典解决方案”（据我所知）是：

for (var i = 2015; i <= 2020; i++) {
  var li = document.createElement("li");
  li.innerHTML = i;
  list.appendChild(li);
}

它完美地工作。

但我想找到替代的，更好的 - 在性能方面 - 解决方案，如果有的话（我想学习更多东西）。

所以我尝试了：

for (var i = 2015; i <= 2020; i++) {
  var el = "<li>" + i + "</li>";
  list.insertAdjacentHTML('beforeend', el);
  console.log(el);
  el += el;
}
<ul id="list"></ul>

和

for (var i = 2015; i <= 2020; i++) {
  var el = "<li>" + i + "</li>";
  list.innerHTML += el;
  console.log(el);
}
<ul id="list"></ul>

但在这两种情况下，结果都是：

<ul id="list">
<li>2015</li>
<li></li>
<li>2016</li>
<li></li>
<li>2017</li>
<li></li>
<li>2018</li>
<li></li>
<li>2019</li>
<li></li>
<li>2020</li>
<li></li>
</ul>

<li>2015<li>
<li>2016<li>
<li>2017<li>
<li>2018<li>
<li>2019<li>
<li>2020<li>

为什么是那些空节点（<li></li>）？为什么只在 DOM 中？

标签： javascripthtmlhtml-lists

解决方案

在您添加"<li>" + i + "<li>"而不是"<li>" + i + "</li>"
Missing slashsmall thing 中，但用户代理已准备好修复丢失的关闭...并且您的代码出现了 doubleli

推荐阅读