Question

lets say i have html something like this..

<ul id="leftNavigation">
  <table id="leftNavTable"><tr><td>blablabla</td></tr><table>
  <li>1</li>
  <li>2</li>
</ul>

what i want to do is when i click on any li, then that table should get hide and another table should get appended in place of that table.lets say that table is

<table id="Selected"><tr><td>blablabla</td></tr><table>

how to do it in jQuery.

i tried in this way but its adding as a last child of ul.

$('#leftNavigation').append('<table id="Selected"><tr><td>blablabla</td></tr><table>')

Thanks in advance!!!!

Answer 1

Use .prepend() or .prependTo() instead.

Check jQuery documentation.

Additional notes

But based on what you’re trying to accomplish you should maybe rather use DOM replacement functionality.

Beware

Adding anything else than LI inside an UL or OL is invalid HTML.

I suggest you add an additional LI, give it some ID or CSS class and then manipulate its content.