试图使用javascript DOM操作为待办事项列表添加一个删除按钮。问题是当我在for循环中使用appendChild()时。它只将我创建的按钮追加到最后一个列表项。
<div id="list">
<ul>
<li class="bold red" random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
</div>
var item = document.querySelectorAll("li");
var button = document.createElement("button");
var buttonText = document.createTextNode("delete");
button.appendChild(buttonText);
for (var i = 0; i < item.length; i++) {
item[i].appendChild(button);
}
只有一个按钮存在,所以你把它从 li
到 li
而它最终会出现在最后一个。 你可以在每次迭代时创建一个新的按钮,这样他们都会得到一个删除按钮。
var item = document.querySelectorAll("li");
for (var i = 0; i < item.length; i++) {
var button = document.createElement("button");
var buttonText = document.createTextNode("delete");
button.appendChild(buttonText);
item[i].appendChild(button);
}