使用.appendNode()时原DOM元素被移除，原因及是否为预期行为？

嘿，这问题我太熟了！你遇到的情况完全是DOM的预期行为，原因其实很简单——DOM节点是「唯一实体」，不能同时存在于DOM树的两个位置上。

为什么原始元素会被移除？ #

• 当你通过clickedEl.nextElementSibling.childNodes[0]获取到textNode时，这个节点已经是DOM树中某个位置的一部分了（也就是它原本在兄弟元素的内部）。
• 调用htmlObject.appendChild(textNode)的时候，浏览器会自动把这个节点从它原来的父节点中移除，然后添加到新的父节点htmlObject里。这是因为DOM规范明确规定：一个节点只能属于一个父节点，没办法同时“分身”待在两个地方。

这是预期行为吗？ #

绝对是！这是DOM操作的基础规则之一。如果你想保留原来的节点，同时在新位置添加一个相同的节点，你需要先克隆这个节点：

// 克隆节点，参数true表示连同所有子节点一起深克隆
var textNodeCopy = clickedEl.nextElementSibling.childNodes[0].cloneNode(true);
var htmlObject = document.createElement('div');
if(video_text) htmlObject.appendChild(textNodeCopy);

这样原来的节点会安稳待在它的原始位置，新的克隆副本会被添加到htmlObject中，两者互不影响。

另外提个小细节：你代码里写的.appendNode()是笔误哦，实际DOM的标准方法是.appendChild()，不过这并不影响你遇到的问题本质~

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