2

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

这是一个例子：

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

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

4

5 回答 5

4

假设我正确理解了您的问题，您可以clone使用以下元素：

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

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

这是一个工作示例。

作为旁注，请注意我在var变量声明之前添加了关键字。这可以防止变量泄漏到全局范围内（您通常不希望这样做）。

作为另一个旁注，看起来这种形式的html方法没有记录在 jQuery API 中（它列出.html( htmlString )了htmlString应该是“HTML 字符串”的状态）。

然而， jQuery 源代码明确允许使用字符串、元素或 jQuery 对象。如果 htmlString是字符串，innerHTML则使用本机属性。如果不是，append则改用该方法：

if ( typeof value === "string" /* ... */ ) {
    //...
}
if ( elem ) {
    this.empty().append( value ); //In your case we end up here
}
于 2012-07-02T12:51:48.440 回答
0

和

var select2 = $("#select-2");

您直接指的是 DOM 元素，而不仅仅是它的内容！这就是为什么您移动元素而不是克隆它的原因。

要做到后者，要么写：

$("#gap").html(select2.clone());

或者

$("#gap").html(select2.html());

或者

var select2 = $("#select-2").html();
$("#gap").html(select2);
于 2012-07-02T12:54:39.343 回答
0

将您的代码更改为此

$(document).ready(function(){
    select1 = $("#select-1");
    select2 = $("#select-2");
    $("#gap").html(select2.html());
    select1.show();
});
于 2012-07-02T12:52:04.697 回答
0

尝试

$(document).ready(function(){
    select1 = $("#select-1");
    select2 = $("#select-2").html();
    $("#gap").html(select2);
    select1.show();
});
于 2012-07-02T12:52:12.610 回答
0

实际上，有几个命令可以做到这一点。我通常使用：insertAfter()、insertBefore()、before()、after()、append()、appendTo()、prepend()、prependTo()。

常用使用方式： html

<div id="somediv">
    some content
</div>

JS

$(document).ready(function(){
  $("<span/>").html("this is what I'm appending").appendTo("#somediv");
});

在这里，我将一个 span inline-block 元素附加到现有的 div 块中。其他功能类似，请随意阅读文档。

如果你想保留原来的，只需像这样使用克隆：

$(document).ready(function(){
  var theclone = $("#select-2").clone();
  theclone.appendTo("#gap");
});

当然有几种方法可以做到这一点，但我认为这可以完成工作。这是您修改后的示例：http: //jsfiddle.net/9PAYd/

于 2012-07-02T12:57:50.340 回答