Question

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

我尝试使用 id =“ change” 为<ul>制作变量，该变量为 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

您在错误的时间获取信息。我还建议您使用其他方法来添加项目，而不是在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>

Answer 2

您的代码有4个问题：

当我评论您的问题时，您的HTML无效。我删除了hr元素。
在简单元素上使用document.createElement和appendChild方法通常更容易（并且几乎总是更快），而不是使用字符串和innerHTML。
您的button没有type属性，因此它是type="submit"（这是默认类型）。
您需要确保Javascript仅在解析DOM之后执行，否则change和ulist是undefined。有几种方法可以实现：
- 将功能包装到在DOMContentLoaded事件中执行的函数中（请参见下面的代码）。
- 确保将Javascript放在body的末尾，紧接在结束标签</body>的前面。
- 将您的Javascript放在外部文件script.js中，然后使用<script src="path/to/script.js" defer></script>在HTML中引用它。

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>

Answer 3

您也可以不使用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 4

我找到了没有appendChild和const和$的解决方案：

我刚刚在onclick="functionName()"上添加了button，它起作用了。

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

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

如何修复按钮未添加新的<li>

4 个答案: