咨询：JS中for循环内append()仅对最后一个元素生效的原因

我正在学习JavaScript，遇到了append()方法的使用问题。在for循环中调用append()时，该方法仅对最后一个元素生效。

代码示例 #

JavaScript代码

let item = document.getElementsByClassName("item");
let delIcon = document.createElement('a')
delIcon.innerHTML = 'del'
for (let i = 0; i < item.length; i++) {
  let newItem = item[i].append(delIcon)
  console.log(newItem);
}

HTML代码

<ul>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
</ul>

运行结果 #

1
2
3
4del

原因分析 #

核心问题是你只创建了一个delIcon DOM元素实例。DOM元素是唯一的实体，不能同时存在于DOM树的多个位置。当你第一次调用append(delIcon)时，元素被添加到第一个<li>里；第二次调用时，它会从第一个<li>中被移除，再添加到第二个<li>中；循环往复，最后这个元素只会停留在最后一个被append的<li>内部，所以看起来只有最后一个元素生效。

解决方法 #

方法1：在循环内创建新元素

把元素创建逻辑放到for循环内部，每次循环都生成一个新的<a>元素实例：

let item = document.getElementsByClassName("item");
for (let i = 0; i < item.length; i++) {
  let delIcon = document.createElement('a')
  delIcon.innerHTML = 'del'
  item[i].append(delIcon)
}

方法2：克隆已有元素

使用cloneNode(true)克隆已创建的元素（true表示深克隆，会复制元素的所有子内容和属性）：

let item = document.getElementsByClassName("item");
let delIcon = document.createElement('a')
delIcon.innerHTML = 'del'
for (let i = 0; i < item.length; i++) {
  item[i].append(delIcon.cloneNode(true))
}

内容的提问来源于stack exchange，提问作者Amirreza Monfared