logo标签列表

如何在 JavaScript 中仅选择父标签并更改其属性，而不影响其子标签？

javascript
3
在下面的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)
});
1个回答
1
我不知道你的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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接