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

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

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

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

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

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


问题在于 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() 方法,如你所见,达不到你想要的效果。

(以上脚本都没试)

【热门文章】
【热门文章】