Javascript 克隆元素的子元素和文本

最好的情况是，在以下情况下，我需要克隆一个元素的内容以及附加的所有事件，这只起作用，但我不能用它克隆文本，如下图所示：

HTML:

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

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

您当前只克隆了一个子节点，它是

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

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

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

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

---

你现在正在克隆独生子女。我建议您使用span包装内容。检查此更新的小提琴：

$（“按钮”）。单击（函数（）{
var$clonedSource=$（'.source'）.clone（true）；
$clonedSource.wrapInner（“”）；
$clonedSource.children（）.clone（true，true）.appendTo（$（'.destination'））；
});

或者仅在一行中：

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

$（“按钮”）。单击（函数（）{
$（'.source'）.clone（true）.wrapInner（''）.children（）.clone（true，true）.appendTo（$（'.destination'））；
});

如果

.source

是父类，请尝试此操作

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

---

但是我不想将父容器添加到destination您可以用另一个

或

包装内容。可以接受吗？我无法控制用户输入，因此无法通过html将其包装成

，这需要通过JavaScriptThank完成！这就是我搜索的内容：）但我不想添加要添加到目的地的父容器：（但这将丢失所有事件：（完全不懂你的意思：）。只需将要克隆的内容包装到另一个标记，例如

或'`问题是我不能，HTML是用户输入，我需要在它周围放置一个包装，而不克隆父容器，因为这是我原始代码中的一个TR。用户输入来自PHP，介于

和

之间。它来自我的Smarty插件，感谢您的帮助（请参见kasyx答案：）您不是简单地将

源代码

的内容复制到

目的地

<代码>$（'.destination'）.html（$（'.source'）.html（））我想我能帮你。@Ragnarokkr那样我会失去我所有的事件是的，我的坏消息。我不认为你需要保留这些活动。抱歉。@Ragnarokkr没关系：）这仍然尊重事件吗？这不是一种更安全的方式吗？但无论如何，谢谢：）正是我想要的：）没有包装

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

$('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'));
});

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