Opposite to jQuery .remove

Question

I have an input form I am trying to remove/add on a click function.

Here is my code:

<script>
        $(document).ready(function(){   
            $("#1").click(function () {
            $("#1").hide("");
            });
            $("#1").click(function () {
                 $("#twitter").remove();
            });
            $("#1").click(function () {
            $("#2").show("");
            });

                    $("#2").click(function () {
            $("#2").hide("");
            });
            $("#2").click(function () {
            $("#1").show("");
            });
            }); 
 </script>

 <span id="1">
 <img align="left" src="../images/twitter_blue.png" width="30px;" style="margin:5px;"/>
 <div>Share as @<?php echo $_SESSION['username']  ?></div>
 </span>
 <img align="left" id="2" src="../images/twitter_white.png" width="30px;" style="margin:5px;display:none;"/>
  <input id="twitter" type="hidden" name="twitter" value="yes"/>

You can see that on click of the span id="1" it removes the image and the input form. And when you click on the img id="2" it hides that one and bring backs the original image. How can I bring back or add the input form that I originally remove on the click of the img id="2". Is there a function that is opposite of .remove?

Thanks!

Answer 1

Use detach if you need to preserve existing jQuery data:

var twitpar = $('#twitter');
var twit = $('#twitter').detach();

then to reattach:

twitpar.append(twit);

Answer 2

you can .clone() what you want

you can replaceWith() what you want

;)