javascript - 如何在单击按钮时将 <li> 附加到 <ul>

Question

如何追加<li>到 <ul>单击按钮。

我已经尝试过下面的脚本，但希望在 <li> 的末尾附加一个数字。例如第 0 项、第 1 项、第 2 项等。

var list = document.getElementById("list");
var add = document.getElementById('addElem');
add.addEventListener('click', function() {
  var itemsByTagName = document.getElementsByTagName("li");
  list.innerHTML += '<li>item</li>'
});

<ul id="list">
  <li>item
  </li>
</ul>
<button id="addElem">Add</button>

Answer 1

这是一个入门示例。

注意:对于生产使用，您可能需要通过服务器/ session /本地存储变量处理变量i。

var i = 1;
var list = document.getElementById("list");
var add = document.getElementById('addElem');
add.addEventListener('click', function() {
  var itemsByTagName = document.getElementsByTagName("li");
  list.innerHTML += '<li>item ' + i++ + '</li>'
});

<ul id="list">
  <li>item
  </li>
</ul>
<button id="addElem">Add</button>