I'm trying to remove contents of particular div which are basically list items and a heading by using jquery empty so that I could replace with new contents. What happens when I run the code is, the whole div element blinked and flash the replaced content and then the old one reappear. Can anyone tell me what am I doing wrong? Here's an excerpt of my code -

<pre>
$("#msg_tab").bind("click",function(){
  $("#sidebar1").remove(); 
  var html="<ul><li><h2>test</h2><ul><li><a href='#'>Compose New Message</a></li><li><a href='#'>Inbox</a></li><li><a href='#'>Outbox</a></li><li><a href='#'>Unread</a></li><li><a href='#'>Archive</a></li></ul></li></ul>";
  $("#sidebar1").append(html);
 });



<div id="sidebar1" class="sidebar">
   <ul>
    <li>
     <h2>Messages</h2>
     <ul>
      <li><a href="#">Compose New Message</a></li>
      <li><a href="#">Inbox</a></li>
      <li><a href="#">Outbox</a></li>      
      <li><a href="#">Unread</a></li>
      <li><a href="#">Archive</a></li>
     </ul>
    </li>
   </ul>
  </div>

Another question is, how do I write multiple line html code string in javascript so that java would recognize as a string value? Placing forward slash at the end is ok when the string is not a html code but, in html code, I can't figure out how to escape forward slash from ending tags.I've tried escaping it with backward slash but doesn't work. I would be appreciated if anyone could shed a light on this matter as well.