Question

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

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

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> ...，因为他不能在两个不同的位置上，所以此命令移动了按钮到第二位，依此类推。

要复制证书，必须使用 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>

加我通过事件委托

添加了处理添加按钮上的单击的方法

Answer 2

您需要为每个项目创建一个新按钮，否则该按钮会在项目之间移动，直到您到达最后一个。

function createButtonElement() {
   var a = document.querySelectorAll("li");

   for(var v =0; v<a.length;v++)
   {
      let btn = document.createElement("button");   
      btn.appendChild(document.createTextNode("Delete Me"));
      a[v].appendChild(btn);
   }   
}

<button onclick="createButtonElement()">click</button>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

Answer 3

此行为记录在autoRepeat中：

如果给定子级是对文档中现有节点的引用， appendChild（）将其从当前位置移动到新位置（无需从其父节点中删除该节点然后将其附加到其他节点）。

相反，为循环中的每个setState实例化一个新按钮：

li

function createButtonElement() {
  var a = document.querySelectorAll("li");

  for (var v = 0; v < a.length; v++) {
    var btn = document.createElement("button");

    btn.appendChild(document.createTextNode("Delete Me"));
    a[v].appendChild(btn);
  }
}

Answer 4

您需要为每个li元素创建按钮

var urls = ["http:/www.google.com", "http:/www.giantbomb.com", "http:/www.stackoverflow.com"];
var executePromiseFunct: function(urls) {
  promiseFunc(urls[0]).then(function() {
    urls.shift();
    if (urls[0]) {
      executePromiseFunct(urls);
    }
  });
}

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

4 个答案: