jQuery中.html()方法为何移动内容而非克隆元素？

核心原因：DOM元素的唯一性 #

每个DOM元素在整个文档的DOM树中只能有一个父节点。当你把已存在的DOM元素直接插入到另一个容器时，它会自动从原来的父节点中被移除，然后添加到新容器——这不是jQuery的特殊行为，而是DOM本身的规则。

.html()方法的工作机制 #

当你调用$(selector).html(content)时，jQuery的处理逻辑是这样的：

1. 清空目标元素：先把目标容器（这里是#demo）内的所有子元素移除。
2. 处理传入的内容：
   • 如果content是HTML字符串，jQuery会把它解析成新的DOM节点，然后插入到目标容器。
   • 如果content是jQuery对象或DOM元素集合，jQuery会直接把这些已存在的DOM元素移动到目标容器中——因为这些元素已经属于DOM树的一部分，不能同时存在于两个位置，所以会从原父节点脱离，重新挂载到目标容器下。

对应你的代码，执行$("#demo").html($("li"))时：

• 首先清空#demo（本来是空的，不影响）。
• 然后获取页面上所有<li>元素（4个，分别在#aList和#bList里）。
• 这4个li会被从原来的<ul>中移除，插入到#demo内部——所以原列表的li消失，都跑到#demo里了。

为什么.append($('li').clone())能实现克隆？ #

clone()方法的作用是创建原DOM元素的副本，这些副本是全新的、独立的DOM节点，和原元素没有关联。当你把这些副本追加到#demo时：

• 原li元素依然留在原来的<ul>中，不受影响。
• 新的副本被添加到#demo里，实现了“复制”的效果。

额外补充：如果想用.html()实现复制怎么办？ #

如果你非要用.html()来完成复制，可以先把克隆后的元素转换成HTML字符串，再传入：

$("#demo").html($('li').clone().wrapAll('<div>').parent().html());

不过这种写法不如直接用clone()+append()直观，后者是更推荐的方式。

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