removing contents of div using Jquery "empty" doesn't work
- by Andrew
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.
