Geek Answers Handbook

JQuery cloned element changes in variable

EDIT:

Working example is now jsbin.com/ivukar/10

Here's what I'm trying to do, summing up the main steps without all the details that would be completely pointless to you:

  • Clone an existing div from the DOM and store this clone in a variable
  • Remove this div from the DOM
  • Add cloned div to DOM
  • Make changes to HTML content in div in DOM
  • Remove div and add clone again

Now, following these steps, let's say that the HTML content of our div was "test", I would expect the following:

  • Variable to hold the div with the contents of "test"
  • Div removed from DOM
  • Div joins the DOM with the content "test"
  • The div on the page is changed so that the content is “changed”
  • The div on the page has been deleted. The div is again added to the body with the test test, because it is stored in a variable and should not be modified in the DOM

And yet, what happens is that as soon as I make this change to the content of the html element, using, for example: $('#element').html('altered'); It also modifies the contents of a variable ...

I do not understand why this will be done, since a variable is always mentioned only when adding it to the DOM, I do not change the contents of the variable at all ...

Here is a JsBin link so you can see what I mean.

Or, alternatively, here is a sample code:

 <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>

Can someone tell me where I am not here?

Thanks.

+4
source share
2 answers

The problem was that you were assigning the actual DOM saved element, not the HTML content.

Old trick:

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

First, you will complete the cloning in the parent div whose HTML you will return.

Updated JSBIN http://jsbin.com/ivukar/4

Link: Get the DOM element as a string

+2
source 
 saved = $('#el').clone();

Must be

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

More articles:


All Articles