Copy a html object and show it again

Question

I need to store a html object and show it again...My code copies it but does not display it..

Requirement: I need the #test to be copied, removed from the page and should be displayed again.

HTML

<div id="test">
    I will be copied, removed and shown again
</div>

jQuery

$( document ).ready(function() {
    alert( "ready!" );
    var a = $("#test")
    $( "#test" ).remove();
     a.show()
});

Sample Fiddle Here
http://jsfiddle.net/w737n/2/

I don't think you actually want to copy it, right? you just want to save it to a variable and remove it from the document, then place it back into the document, right? I don't see where you are trying to put it back into the document. — attila, May 02 '14 at 00:35

score 0 · Answer 1 · answered May 02 '14 at 00:38

1 => I donno what is the reason but you could use it like this: demo http://jsfiddle.net/7Qees/
2 => using clone : demo http://jsfiddle.net/ZsDHL/

API":

http://api.jquery.com/clone/

Hope rest helps the need :)

Code your code

$( document ).ready(function() {
    alert( "ready!" );
    var a = $("#test");
    $( "#test" ).remove();

        $('#what').html(a.html());
});

code with clone

$(document).ready(function () {
    $('#drpCars').clone().appendTo('#divCars1');
    $('#drpCars').clone().appendTo('#divCars2');
    $('#drpCars').clone().appendTo('#divCars3');
    $('#drpCars').clone().appendTo('#divCars4');
});

:I need to store the element in a webstorage in the web browser and retrieve it later when the user comes back..Basically I want to serialize and deserialize the object asis... — user1050619, May 02 '14 at 00:45

score 0 · Answer 2 · answered May 02 '14 at 00:45

You can try something like this jsFiddle:

$(document).ready(function () {

    var $test = $("#test");

    $("#addBtn").click(function () {
        $("#container").append($test);
    });

    $("#removeBtn").click(function () {
        $test.remove();
    });
});

Since the element is stored in $test, it won't be added or removed multiple times. The same element is moved around as needed.

Copy a html object and show it again

2 Answers2