Jquery replace div content html ()

Question

I'm just trying to replace the contents of a div with the new content associated with the click event.

JSFIDDLE

When I use appendTo() instead of html() , it works, but I need to clear the old content, so I'm a bit confused why this does not work, how it should do

Answer 1

Instead of selector instead of content , content used instead of content , you need to use # with the identifier selctor. you can do it this way

Live demo

 function showitnow() { var div_data = "<div ><a href='XXX'>XXX</a></div>"; $("#test1").html(div_data); } $("#button1").click(function() { showitnow(); });​ 

Answer 2

You have some errors in your violin. It should be like this: http://jsfiddle.net/pCckh/3/

 function showitnow() { var div_data = "<div ><a href='XXX'>XXX</a></div>"; $("#test1").html(div_data); // ^---selector----^----------your content } $("#button1").click(function() { showitnow(); // ^----------------remove the var and just call the function when click the button }); 

Answer 3

maybe you can try this.
playing your jquery as a parent and child.

 <div id="Destination"> <div class="child_content"> item 1 </div> <div class="child_content"> item 2 </div> </div> <div id="Source"> <div class="child_content"> item 1 </div> <div class="child_content"> item 2 </div> </div> <script type="text/javascript"> $(document).ready(function(){ $("#Source .child_content").click(function(){ $(this).parent().remove(); $(this).appendTo("#Destination"); }); }); </script> 

Hope this helps ...

Answer 4

Please look! Expected Result...

In the same example, only a few modifications are required.

 <div id = 'div_data'> <button id="button1">BUTTON1</button> div> <div id="test2"></div>