Question

最好所有我得到以下情况，我需要克隆一个元素的内容，其中附加了所有事件，这只有我无法用它克隆文本，如此fiddle所示：

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();

克隆儿童和元素的文本

3 个答案: