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

这是一个入门示例。

注意：对于生产用途，您可能需要处理变量i到server/session/local storage variable。

＆＃13;

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>'
});

＆＃13;

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

＆＃13;

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

1 个答案: