gpt4 book ai didi

javascript - 向列表添加删除按钮

转载 作者:行者123 更新时间:2023-12-02 21:00:08 24 4
gpt4 key购买 nike

尝试使用 javascript DOM 操作将删除按钮添加到待办事项列表中。问题是当我在 for 循环中附加Child() 时。它仅将我创建的按钮附加到最后一个列表项。

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

关于javascript - 向列表添加删除按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61375655/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com