删除后重新插入后保留对元素的引用

Question

在document.ready中，我将一个选择器存储在一个变量中（我假设一旦被评估，将元素对象存储在所述变量中），因为我需要多次操作它。

即。 myVar = $('#mySpan');

我正在存储的是div中的span元素。其中一个操作要求我使用.html（）函数覆盖div的内容。

之后，我需要在上面提到的div中重新插入span元素，并使用html（）函数。

我遇到的问题是，一旦重新添加了span元素，变量myVar就不再与span元素相关联。我认为这是因为它已从DOM中删除然后重新添加。

我知道jquery有.detach（）函数，但这似乎只保留附加的事件和数据元素，而不是实际的引用。我甚至不知道.live（）函数在这种情况下也会有所帮助。

Answer 1

修改

如果要保留变量中的内容以供日后插入，只需使用.contents()将其存储在变量中，然后在需要时重新插入。

jQuery的.contents()方法选择所有内容，包括文本节点。

• http://api.jquery.com/contents/

尝试一下： http://jsfiddle.net/bD2Ej/2/ （点击要切换的文字）

此示例在原始内容和新内容之间切换。

var myVar;

// Add the new content, and append the element stored in myVar
$('#somediv').toggle(function() {
    myVar = $(this).contents();
    $(this).html('some new content<br>');
}, function() {
    $(this).html( myVar );
});
​

---

原始ansewr：

如果您使用.detach()，则仍需将其存储在变量中。

以下是一个例子： http://jsfiddle.net/bD2Ej/

   // Detach and reference the element in a variable
myVar = $('#mySpan').detach();

   // Add the new content, and append the element stored in myVar
$('#somediv').html('somecontent').append( myVar );

但你确定需要.html()吗？您可以使用.append()，这样首先不会覆盖#mySpan吗？

Answer 2

尝试克隆（）;

myVar = $('#mySpan').clone();
$('#mySpan').remove();
$('#somediv').html(myVar);

http://api.jquery.com/clone/