gpt4 book ai didi

javascript - 如何只选择父标签并更改其属性而不影响其在javascript中的子标签

转载 作者:行者123 更新时间:2023-11-29 15:07:37 26 4
gpt4 key购买 nike

在下面的 HTML 代码中,我在每个 li 标签下插入了按钮,我想在按下相应按钮后立即更改 li 标签内的内容。但是为此我不能只选择 li 标签(即没有它的子按钮)。

<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter" width='50px'>Enter</button>
<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>
<script type="text/javascript" src="script1.js"></script>
</body>
var ul= document.querySelector('ul')
var li=document.querySelectorAll('li');
li.forEach(function(i,value){
var button=document.createElement('button');
button.appendChild(document.createTextNode('delete'));
button.setAttribute('id',value)
addButtonToTagList(i,button)
});

最佳答案

我不知道你的 addButtonToTagList 函数做了什么,但它应该在当前 li 上调用 appendChild,将它传递给你刚刚创建的按钮元素。

var addButtonToTagList = function(item, value) {
var button = document.createElement('button');
button.appendChild(document.createTextNode('delete'));
button.setAttribute('id', value);
item.appendChild(button);
}
var ul = document.querySelector('ul')
var li = document.querySelectorAll('li');
li.forEach(function(item, value) {
addButtonToTagList(item, value);
});
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter" width='50px'>Enter</button>
<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>
</body>

关于javascript - 如何只选择父标签并更改其属性而不影响其在javascript中的子标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58355947/

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