6

编辑:

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


这是我正在尝试做的事情,总结为核心步骤,没有所有对您来说毫无意义的细节:

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

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

  1. 将 div 与内容“test”一起存储的变量
  2. 从 DOM 中删除的 Div
  3. div 附加到 DOM,内容为“test”
  4. 页面上的 Div 已更改为内容“已更改”
  5. 页面上的 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>

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

谢谢。

4

2 回答 2

2

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

老套路:

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

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

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

参考:Get DOM element as string

于 2013-04-23T14:54:47.777 回答
-1
saved = $('#el').clone();

应该

saved = $('#el').clone().html();
于 2013-04-23T14:35:02.543 回答