jQuery里面的重复项目

Question

我有以下HTML结构:

<div id="container">
     <div class='label-item-text drag' data-type='text'>
         <div>Right click on me and check the HTML of the duplicated</div>
     </div>
</div>

而我正在尝试复制里面的项目#container.不幸的是,我没有按预期工作.

A)我的代码复制了里面的所有项目,实际上我只选了一个

B)我不能正确复制

复制所有项目的代码如下.

$('#container').append($dragRightClick.parent().html());

好了,parent()的$dragRightClick是#container,让我明白为什么它复制的所有项目的原因...

我想复制的只是里面的div #container,这意味着:

<div class='label-item-text drag' data-type='text'>
    <div>Right click on me and check the HTML of the duplicated</div>
</div>

但到目前为止我所得到的只是:

<div>Right click on me and check the HTML of the duplicated</div>

以下代码输出上面的代码:

console.log("Clone: " + $dragRightClick.clone().html());
console.log("HTML: " + $dragRightClick.html()); 

您可以在JSFiddle中查看完整的问题.

Answer 1

为此目的使用outerHTML ：

代替：

$('#container').append($dragRightClick.parent().html());

和：

$('#container').append($dragRightClick[0].outerHTML);

更新的小提琴

您还可以使用这个为以下内容编写的 jquery 插件outerHTML：

http://css-tricks.com/snippets/jquery/outerhtml-jquery-plugin/