編集：
jsbin.com/ivukar/10での作業例
これが私がやろうとしていることであり、あなたにとってかなり無意味なすべての詳細なしでコアステップに要約されています:
- DOM から既存の div を複製し、その複製を変数に格納する
- そのdivをDOMから削除します
- 複製された div を DOM に追加します
- DOM の div の HTML コンテンツに変更を加える
- div を削除し、クローンを再度挿入します
これらの手順に従って、div の HTML コンテンツが「テスト」であるとしましょう。次のようになります。
- コンテンツ「test」とともに div を格納するための変数
- DOM から削除された Div
- コンテンツ「テスト」を含む DOM への div 追加
- コンテンツが「変更」されるように変更されたページ上の Div
- ページ上の Div が削除されました。変数に格納されており、DOM の変更による影響を受けないため、コンテンツ「test」を含む Div がボディに再度追加されます。
それでも、要素の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>
ここでどこが間違っているのか誰か教えてもらえますか?
ありがとう。