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

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