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

Question

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

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

在DOM:

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

Answer 1

在两者中您都添加了 "<li>" + i + "<li>" 而不是 "<li>" + i + "</li>"
缺少 slash 小东西，但是 用户代理 准备修复丢失的关闭...并且您的代码显示为双倍 li

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

Alternative ways to dynamically create li elements

html

javascript

html-lists