为何无法对同一父元素同时append、prepend同一个创建的DOM元素

核心规则 #

DOM 标准明确约束：所有真实DOM节点都是引用类型对象，同一时间在文档树中只能拥有唯一的一个挂载位置，不存在同一个节点同时出现在文档多个位置的情况。

插入方法的实际执行逻辑 #

你调用append()、prepend()等所有DOM插入方法时，浏览器不会复制传入的节点，只会按以下流程操作节点引用关系：

• 先检查传入的待插入节点当前是否已经存在于文档树中（即是否有父节点）
• 如果节点已经有挂载位置，会先隐式将节点从原有位置移除
• 最后把节点挂载到本次调用指定的新位置

这就解释了你观察到的现象：

• 第一次调用ul.prepend(li)时，li还没有父节点，直接被挂到ul的子节点开头
• 第二次调用ul.append(li)时，li已经是ul的子节点，浏览器先把li从开头位置删掉，再挂到ul的子节点末尾
• 无论你调换两次调用的顺序，永远只有最后一次插入指定的位置会保留节点

为什么cloneNode可以实现多位置插入 #

li.cloneNode(true)会生成一个和原节点属性、子节点内容完全一致的全新独立DOM对象，这个新节点和原节点是两个完全独立的引用，默认没有挂载到任何文档位置，插入时不会触发「先移除原有位置」的逻辑，自然可以和原节点分别放在首尾两个位置。

验证逻辑示例 #

你可以运行以下代码验证节点移动的过程：

const ul = document.querySelector('ul');
const li = document.createElement('li');
li.textContent = 'test node';

console.log(li.parentElement); // 输出null，节点未挂载
ul.prepend(li);
console.log(li.parentElement === ul); // 输出true，节点已挂载到ul
console.log(ul.firstElementChild === li); // 输出true，节点在ul开头位置

ul.append(li);
console.log(ul.firstElementChild === li); // 输出false，节点已从开头移除
console.log(ul.lastElementChild === li); // 输出true，节点被移动到ul末尾

注：这也是前端新手写循环插入节点时最常踩的坑：如果在循环外createElement，循环内反复插入同一个节点，最终页面只会出现最后一次插入的节点，本质是同一个规则导致的。

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