向列表添加删除按钮

Question

尝试使用 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);
}

Answer 1

只有一个按钮，因此您将其从 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);
}

向列表添加删除按钮

Adding a delete button to a list

javascript

arrays

dom

for-loop

appendchild