如何附加 <li>到一个<ul>点击按钮 [英] How to append <li> to a <ul> on button click

问题描述

如何在单击按钮时将

附加到

.

How to append <li> to a <ul> on a button click.

我已经尝试过下面的脚本，但希望在

• 的末尾附加一个数字.像第 0 项、第 1 项、第 2 项等.

  I have tried below script, but want to have a number appended to the end of <li>. Like item 0, item 1, item 2, etc..

  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>

  推荐答案

  这是一个入门示例.

  注意:对于生产用途，您可能需要通过 server/session/local storage variable 处理变量 i.

  Note: For production use you might need to handle the variable i through server/session/local storage variable.

  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>

  这篇关于如何附加 <li>到一个<ul>点击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！