调用appendChild追加同一DOM节点变量为何消失，如何实现多容器追加？

同一个DOM节点无法重复追加到不同父元素的原因 #

• 每个原生DOM节点在DOM树中是唯一的实体，仅能对应一个父节点，不存在同时属于多个父元素的情况。
• appendChild方法的底层逻辑是：如果传入的节点已经属于其他父节点，会先将该节点从原父节点中移除，再追加到新的父节点下，所以你会看到节点从第一个container中消失。

实现多份相同节点追加的方案 #

你可以使用DOM节点自带的cloneNode()方法克隆节点后再分别追加，该方法接收一个布尔值参数：

• 传true为深克隆：会完整复制节点本身、所有属性、所有子节点内容
• 传false为浅克隆：仅复制节点本身，不会复制内部的子节点和文本内容

你可以参考修改后的代码：

<body>
<h1 class="titulo">Esto es un <b style="visibility: none;">titulo</b> </h1>
<div style="background-color: aliceblue; height: 200px;" class="container"></div>
<div style="background-color: #ccc; height: 200px;" class="container1"></div>
<script>
    const container = document.querySelector(".container");
    const container1 = document.querySelector(".container1");

    const item = document.createElement("LI");
    item.textContent = "this text go inside";
    
    // 给第一个容器加原节点
    container.appendChild(item);
    // 给第二个容器加克隆后的节点，深克隆保证内容一致
    const clonedItem = item.cloneNode(true);
    container1.appendChild(clonedItem);
</script>
</body>

如果需要追加到更多父元素，每次克隆一次原节点即可。

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