Блог

Используя 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?

В обоих вы добавили "<li>" i "<li>" вместо "<li>" i "</li>"
Отсутствует slash небольшая деталь, но пользовательские агенты готовы исправить пропущенное закрытие… и ваш код появился с удвоенным li