Question

我需要向现有的li添加按钮。这是我的代码：

function buttonDelete（）{

var items = document.getElementsByTagName("li");
var button =document.createElement("button");
button.appendChild(document.createTextNode("Delete"));
items.appendChild(button);
button.onclick = function() {
this.remove();
items.remove();
}
}
buttonDelete();

但是，我收到一个错误：未捕获的TypeError：items.appendChild不是一个函数。

如果我仅选择一个li项目（var items = document.querySelector（“ li”）;），则只会为第一个项目添加按钮。

Answer 1

document.getElementsByTagName 功能返回具有指定标签名称的文档中所有元素的集合，作为 NodeList 对象。

对于返回的集合中的每个项目，您都应定义一个loop并附加一个button子代。

var items = document.getElementsByTagName("li");
Array.from(items).forEach(elem => {
  var button =document.createElement("button");
  button.appendChild(document.createTextNode("Delete"));
  button.onclick = function() {
      this.parentElement.remove();
  }
  elem.appendChild(button);
});

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 2

getElementsByTagName返回li的HTMLCollection。如果要向每个按钮添加按钮，则需要遍历每个按钮。

const items = document.getElementsByTagName("li");
Object.values(items).forEach((li,i)=>{
   const but = document.createElement("button");
   but.innerHTML = i;
   li.appendChild(but);
});

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

错误消息：未捕获的TypeError：items.appendChild不是函数

2 个答案: