javascript - 如何修复按钮不添加新的 <li>

Question

我只是在单击“添加新项目”按钮时遇到问题，javascript 不会为我添加新行 (<li>)在<ul>

我尝试为<ul>创建一个变量其中 id="change" 为 document.getElementById("change");

另一方面，我刚刚向此变量添加了一个“addEventListener”，因此当我单击此按钮时，名为“achange”的函数将开始工作，并向 <ul> 添加新行

var icounter = 1;
var c = document.getElementById("change");
c.addEventListener("click", achange);

function achange() {
  ulist.innerHTML += "<li> New Item " + icounter + "</li>";
}

<h1 id="header"> List that contains items. </h1>
<button id="change">Add New Item </button>
<ul type="square" id="ulist">
  <li> Pizza </li>
  <hr align="left" width="20%">
  <li> Burger </li>
  <hr align="left" width="20%">
  <li> Chicken Dinner </li>
  <hr align="left" width="20%">
  <li> Salad </li>
  <hr align="left" width="20%">
</ul>

我希望添加一行内容: "New Item 0" ，但没有任何反应，任何帮助将不胜感激。 谢谢

Answer 1

你在错误的时间得到了东西。我还建议采用不同的方式附加项目，而不是将文本附加到 innerHTML 中。

在您的函数中(当您添加项目时)，您需要获取对 ul 的引用并从那里附加子项。这也使您有机会获得用于对下一项进行编号的 li 计数(如果您愿意)

此外，正如其他人指出的那样，并非所有浏览器都支持您尝试使用 ulist 执行的 id 引用

这里要提到的另一件事是 hr 不是 ul 的有效后代。如果您确实想要 hr，您应该使用 css 或将 hr 放入 li ( Is anything except LI's allowed in a UL? )

const addNewItem = () => {
  const list = document.getElementById('ulist');
  const liCount = list.querySelectorAll('li').length;
  const hr = document.createElement('hr');
  hr.setAttribute('align', 'left');
  hr.setAttribute('width', '20%');
  const newLi = document.createElement('li');
  newLi.innerText = `Item # ${liCount + 1}`;
  newLi.append(hr);
  list.appendChild(newLi);
};

document.getElementById('change').addEventListener('click', addNewItem);

<h1 id="header"> List that contains items. </h1>
<button id="change">Add New Item </button>
<ul type="square" id="ulist">
<li> Pizza </li> <hr align="left" width="20%">
<li> Burger </li> <hr align="left" width="20%"> 
<li> Chicken Dinner </li> <hr align="left" width="20%">
<li> Salad </li> <hr align="left" width="20%">
</ul>