Question

修改

现在在jsbin.com/ivukar/10

的工作示例

以下是我正在尝试做的事情，总结为核心步骤，而没有对您来说毫无意义的所有细节：

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

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

使用内容“test”
Div从DOM中移除
Div附加到DOM，内容为“test”
对页面进行了更改以使内容“已更改”
删除页面上的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>

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

感谢。

Answer 1

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

一个老技巧：

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

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

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

参考：Get DOM element as string

Answer 2

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

应该是

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

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

2 个答案: