在使用html方法插入元素时，我可以将原始内容保留在DOM中吗？

Question

我发现了一件奇怪的事。当我使用jQuery html()方法将一个元素插入到另一个元素中时，第一个元素将从DOM中删除。我想知道是否可以插入一个元素并将其保存在DOM中。

这是an example

$(document).ready(function(){
    select1 = $("#select-1");
    select2 = $("#select-2");
    $("#gap").html(select2); //Original select2 removed from DOM
});

如您所见，如果将#select-2元素插入到另一个元素中，它将不再可见。但我想插入它，并像以前一样保留原元素。

Answer 1

假设我已经正确理解了您的问题，您可以clone元素：

$(document).ready(function(){
    var select1 = $("#select-1"),
        select2 = $("#select-2");
    $("#gap").html(select2.clone());
});

如果需要保留任何绑定到select2的事件处理程序，可以将true作为参数传递给clone。

这是一个working example。

注意，我在变量声明之前添加了var关键字。这可以防止变量泄漏到全局作用域(这通常不是您想要的)。

另外，这种形式的html方法似乎没有记录在HTML中(它列出了.html( htmlString )，并声明htmlString应该是一个“HTML字符串”)。

但是，jQuery source显然允许使用字符串、元素或jQuery对象。如果htmlString是字符串，则使用本机innerHTML属性。如果不是，则使用append方法：

if ( typeof value === "string" /* ... */ ) {
    //...
}
if ( elem ) {
    this.empty().append( value ); //In your case we end up here
}

Answer 2

将您的代码更改为以下代码

$(document).ready(function(){
    select1 = $("#select-1");
    select2 = $("#select-2");
    $("#gap").html(select2.html());
    select1.show();
});

Answer 3

试一试

$(document).ready(function(){
    select1 = $("#select-1");
    select2 = $("#select-2").html();
    $("#gap").html(select2);
    select1.show();
});