Javascript-动态创建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>

AND

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

预先感谢您的建议。

解决方法

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

出现