javascript - 向每个列表元素添加一个按钮元素

Question

我想将按钮元素添加到每个列表元素(JavaScript)。

这是我的代码。我用的是fro循环。在输出中，只有列表的最后一个元素获取按钮元素。我做错了什么。

function createButtonElement() {
    var btn = document.createElement("button");   `

   btn.appendChild(document.createTextNode("Delete Me"));
   var a = document.querySelectorAll("li");

   for(var v =0; v<a.length;v++)
    {
      a[v].appendChild(btn);
    }   
}

Answer 1

您只创建了一个按钮并将其附加到第一个 <LI> 上，然后将其附加到第二个 <LI> ...因为他不能在两个不同的位置，所以此命令将您的按钮移动到第二个位置，依此类推。

要复制 élent，您必须使用 cloneNode 方法:https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

示例代码:

const MyList     = document.querySelector('#My-List')
  ,   AddButtons = document.querySelector('#Add-Buttons')

AddButtons.onclick=_=>
{
  let newBt = document.createElement('button')
  newBt.textContent = 'Delete Me'
  document.querySelectorAll("#My-List li").forEach(eLI=>eLI.appendChild( newBt.cloneNode(true)) )
}

MyList.onclick=e=>
{
  if (e.target.tagName.toLowerCase() !='button') return
  let pLI = e.target.parentElement
  MyList.removeChild(pLI)
}

<button id="Add-Buttons">Add Buttons to each element on list</button>

<ul id="My-List">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

加我通过事件委托(delegate)添加了处理添加按钮的点击的方法