JS循环append同一createElement元素仅渲染1个按钮的问题咨询

核心疑问答复 #

调用document.createElement()创建的DOM元素默认不会自带唯一ID：新生成的是空白的独立DOM节点实例，id属性初始值为空字符串，浏览器不会自动为其分配任何唯一标识，需要ID的话必须手动给节点的id属性赋值。

两段代码渲染结果差异的原因 #

DOM节点有一个基础规则：同一个DOM节点实例在同一时间只能挂载在文档树的一个位置。如果对已经存在于DOM树中的节点调用append()/appendChild()方法，节点会先从原有位置被移除，再插入到新的目标位置，不会自动生成节点副本。

• 能正常渲染4个按钮的代码：map循环每执行一次，就会调用一次createElement()生成全新的独立button节点实例，4次循环共生成4个完全独立的按钮，依次插入到list节点下，最终渲染出4个按钮。
• 仅渲染1个按钮的代码：newButton2是在循环外仅创建1次的单个button节点实例，循环过程中反复对同一个节点执行append操作，每次插入都会把节点从上一次的位置移走，循环结束后节点只会停留在最后一次插入的位置，因此页面最终只显示1个按钮。

修复方案 #

如果要让第二段代码也渲染出4个按钮，有两种常见实现方式：

方案1：将节点创建逻辑移到循环内部 #

每次循环都生成全新的节点实例再插入：

const arr = [1, 2, 3, 4];
const list2 = document.getElementById('list2');
arr.map(item => {
  const newButton2 = document.createElement('button');
  newButton2.innerHTML = `Button2`;
  list2.append(newButton2);
});

方案2：插入前克隆已有节点 #

如果需要复用初始节点的预设属性，可以用cloneNode()方法生成节点副本后再插入，参数传true代表深克隆，会保留原节点的所有属性和子节点：

const arr = [1, 2, 3, 4];
const list2 = document.getElementById('list2');
const newButton2 = document.createElement('button');
newButton2.innerHTML = `Button2`;

arr.map(item => {
  const btnClone = newButton2.cloneNode(true);
  list2.append(btnClone);
});

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