javascript - 克隆元素的子元素和文本

Question

最好的情况是我遇到了以下情况，我需要克隆一个元素的内容以及所有附加的事件，这只有我不能用它克隆文本，就像这个小提琴中所示：

HTML：

<div class="source">Say bye bye, little text!
    <span class="stay">I'm gonna clone!</span>
More text
</div>

<div class="destination">

</div>

<button>Clone!</button>

JS：

$('button').click(function(){
    $('.source').children().clone(true,true).appendTo($('.destination'));
});

我怎样才能让它工作？文本也被克隆而不克隆目标中的父容器或更改 html 输入？

Answer 1

$('.source').clone(true,true).appendTo($('.destination'));

您目前正在克隆一个子节点，它是<span>

upd：或者您可以将对象的 html 附加到另一个对象：

$('.destination').append($('.source').html());

upd2：由于您克隆的是用户输入，并且您有某种包含整个输入的字符串，因此您将其附加到 .source 为：

$(".source").append('<span id="some_id">' + user_input + '</span>');

并克隆它：

$(".source").find("#some_id").clone(true,true).appendTo($('.destination'));

Answer 2

你现在只克隆孩子。我建议你用 span 包装内容。检查这个更新的小提琴：http: //jsfiddle.net/QPMjH/3/

$('button').click(function(){
    var $clonedSource = $('.source').clone(true);
    $clonedSource.wrapInner('<span>');
    $clonedSource.children().clone(true,true).appendTo($('.destination'));
});

或仅在一行中：

$('button').click(function(){
    $('.source').clone(true).wrapInner('<span>').children().clone(true,true).appendTo($('.destination'));
});

Answer 3

如果.source是父类，那么试试这个。

$('.destination').append(
    $('.source').clone( true )
).find('.source').contents().unwrap();