为何多次append jQuery对象只有一个dom节点

Question

为何必须得clone才能把对象append到dom中
而直接append只能出现一个dom节点,如下

var obj = "<div>对象</div>";
var $obj = $(obj);
$(obj).appendTo($(".xx"));
$(obj).appendTo($(".xx"));

Answer 1

问题在于 appendTo() 或者 append() 方法都是移动 DOM 对象，而不是将 DOM 对象复制到你指定的那个地方。

比如下面这样的 HTML 结构：

<div id = "a"></div>
<div id = "b"></div>

<p></p>

执行这样的 jQuery 脚本：

var $a = $("#a"),
    $b = $("#b"),
    $p = $("p");
    
$p.appendTo($a);

HTML 结构就变成了：

<div id = "a"><p></p></div>
<div id = "b"></div>

再执行这样的脚本：

$p.appendTo($b);

HTML 结构就变成了：

<div id = "a"></div>
<div id = "b"><p></p></div>

也就是说，如果你想出现多个 <p></p> 标签，要么生成多个 <p></p> 元素，要么克隆多个。

直接用 append() 与 appendTo() 方法，如你所见，达不到你想要的效果。

（以上脚本都没试）

Answer 2

因为 $obj 指向的是同一个dom对象 第二次appendTo 是拿第一次添加到dom树里的 $obj移动到新的父节点下 表现的效果是不做任何操作 如果是appendTo其他父节点 则是移动节点

所以需要重新生成新的节点 或者 clone一份节点