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

在下面的HTML代码中，我在每个

li

标记下插入了按钮，我想在按下

li

标记对应的按钮后立即更改标记内的内容。但为此，我无法仅选择

li

标记（即，没有其子项按钮）

购物清单
今天就完成
进入

笔记本电脑
果冻
菠菜
米饭
生日蛋糕
蜡烛

---

我不知道AddButtonTagList函数做什么，但它应该在当前的

li

上调用

appendChild

，并将刚才创建的按钮元素传递给它

var addButtonTagList=函数（项、值）{
var button=document.createElement（'button'）；
appendChild（document.createTextNode（'delete'）；
setAttribute（'id'，值）；
项。追加子项（按钮）；
}
var ul=document.querySelector（'ul'）
var li=document.querySelectorAll（'li'）；
li.forEach（功能（项目、值）{
AddButtontTagList（项目、值）；
});

购物清单
今天就完成
进入

笔记本电脑
果冻
菠菜
米饭
生日蛋糕
蜡烛


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