jquery克隆元素在变量中被改变答案

【问题标题】：jquery cloned element being altered in variablejquery克隆元素在变量中被改变
【发布时间】：2013-04-23 14:13:56
【问题描述】：

编辑：

工作示例现在在jsbin.com/ivukar/10

这是我正在尝试做的，总结为核心步骤，没有所有对你来说毫无意义的细节：

从 DOM 中克隆一个现有的 div 并将该克隆存储在一个变量中
从 DOM 中删除该 div
将克隆的 div 追加到 DOM 中
在 DOM 中更改 div 的 HTML 内容
删除 div 并再次插入克隆

现在按照这些步骤，假设我们的 div 的 HTML 内容是“测试”，我希望如下：

让 div 与内容“test”一起存储的变量
从 DOM 中删除了 Div
Div 附加到 DOM，内容为“test”
页面上的 Div 已更改为内容“已更改”
已删除页面上的 Div。 div 再次附加到正文，内容为“test”，因为它存储在变量中，不应受到 DOM 更改的影响

然而发生的事情是，一旦我对元素的 html 内容进行更改，例如：$('#element').html('altered'); 它也会更改变量的内容......

我不明白它为什么会这样做，因为该变量仅在将其附加到 DOM 时才会被引用，所以我不会更改变量的内容...

这是一个JsBin 链接，所以你可以明白我的意思。

或者这里是示例代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
var saved = '';

function my_clone()
{
saved = $('#el').clone();
$('#output').append("<a href='#' onclick='my_remove();'>Remove version on screen</a> ----- This removes any element with the id 'el'<br>");
}

function my_remove()
{

$('#el').remove();
$('#output').append("<a href='#' onclick='my_append();'>Append clone to body</a> ----- This takes the cloned object stored in the variable 'saved' and appends it to the html body<br>");

}

function my_append()
{

$('body').append( saved );
$('#output').append("<a href='#' onclick='my_alter();'>Alter .html() of element</a>----- This alters the html of any element with the id 'el'<br>");

}

function my_alter()
{

$('#el').html('altered');
$('#output').append("<a href='#' onclick='my_remove_again();'>Remove version on screen again</a>----- This removes any element with the id 'el'<br>");

}

function my_remove_again()
{
$('#el').remove();
$('#output').append("<a href='#' onclick='my_append_again();'>Append clone to body</a> ----- This again takes the object stored in the 'saved' variable, which is separate from the DOM and should not have been affected by the html change and appends to the html body<br>");
} 

function my_append_again()
{
$('body').append( saved );
}


</script>
<style>
#el {color:red;}
</style>
</head>
<body>

<div id="el">
    <div id="various">Various</div>
    <div id="sub">Sub
        <div id="and-sub-sub">And Sub-Sub</div>
    </div>
    <div id="elements">Elements</div>
</div>

<br><br>
<div id="output">
<a href="#" onclick="my_clone();">Clone</a> ------ This stores the clone into a global variable called 'saved'<br>
</div>

</body>
</html>

谁能告诉我这里哪里出错了？

谢谢。

【问题讨论】：

标签： javascript jquery clone

【解决方案1】：

问题在于您将实际的 DOM 元素分配给 saved 而不是 HTML 内容。

一个老把戏：

saved = $("#el").clone().wrap('<div/>').parent().html();

您首先将克隆包装在您返回其 HTML 的父 div 中。

更新 JSBIN http://jsbin.com/ivukar/4

参考：Get DOM element as string

【讨论】：

谢谢。在我的实时系统中，正在克隆的元素中有输入，并且仅克隆 .html() 会丢失已放置在输入中的任何内容。例如。 [jsbin.com/ivukar/5] 你知道获取输入数据的方法吗？干杯。
我遇到了完全相同的问题。我通过在删除内容之前将输入值保存在局部变量中来解决它，然后在所有操作之后，将空输入值替换为 $("input#abc").val(a); 其中a 是之前存储的值。
谢谢，我试试看
JSBIN: jsbin.com/ivukar/7 诚然，我不喜欢手动保存输入值，但它适用于少量输入值。
是的，不幸的是，这些输入可以是系统用户指定的任何数字。所以我认为我必须遍历它们，

【解决方案2】：

saved = $('#el').clone();

应该是

saved = $('#el').clone().html();

【讨论】：