如何修复按钮不是添加新的

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>

我期待添加一行说“新项目0”，但没有任何反应，任何帮助将不胜感激。谢谢

Answer 1

您也可以在不使用appendChild的情况下执行此操作：

var iCounter = 1;

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

function achange() {

  var ulist = document.getElementById('ulist');
  
  ulist.innerHTML += '<li> New Item ' + (iCounter++) + ' </li><hr align="left" width="20%">';
  
}

<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>

Answer 2

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

在你的功能中（当你添加项目时）你将想要获得你的ul的引用并从那里追加孩子。这也让你有机会获得lis的数量来编号下一个项目（如果你愿意的话）

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

另外要提到的是qazxsw poi不是qazxsw poi的有效后裔。如果你真的想要hr，你应该使用css或将hr放在ul（hr）中

li

Is anything except LI's allowed in a UL?

Answer 3

您的代码有4个问题：

1. 由于我对您的问题发表了评论，因此您的HTML无效。我删除了

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

   元素。
2. 在简单的元素上使用

   <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>

   和hr方法通常更容易（并且几乎总是更快），而不是使用字符串和innerHTML。
3. 你的document.createElement没有appendChild属性，所以它是button（这是默认类型）。
4. 你需要确保只有在解析了DOM之后才执行Javascript，否则type和type="submit"就是change。有几种方法可以实现这一目标： 将功能包装在ulist事件中执行的函数中（参见下面的代码）。 确保Javascript位于undefined的末尾，就在结束标记DOMContentLoaded之前。 将您的Javascript放在外部文件body中，并使用</body>在HTML中引用它。

script.js

<script src="path/to/script.js" defer></script>

Answer 4

我找到了没有

var icounter = 1;

document.addEventListener('DOMContentLoaded', () => {
  change.addEventListener("click", achange);

  function achange() {
    const li = document.createElement('li');
    li.textContent = `New Item ${icounter++}`;
    ulist.appendChild(li);
  }
})

和

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

和appendChild的解决方案：

我刚刚在const上添加了$并且它有效。

onclick="functionName()"

button