not able to add list item between a list using jquery

Question

Hi I m having a ordered list having the structure

<ol>
      <li>
      </li>
      <li>
      </li>
      <li>
         <ol>
              <li>
                 Test
              </li>
              <li>
                 another test
              </li>
              <li>
                   <a href='#'>Add </a>
              </li>
         </ol>
      </li>

</ol>

I want to add a list item between sublist 2 and 3 using jquery

I used the code: -

$("ol#update li ol li:eq(1)").append("<li> test </li>");

But this appends inside the li "another test" and not after the 2 li

Here is the example page

On-click "sub-comment" adds a li inside li 2
Clicking on "comment" shows the structure of the sub lis

Please help

Thanks

Pradyut

Answer 1

Use after instead of append

Answer 2

I'm not big into jquery... but using normal javascript functions (as well) you can do:

var item = $("ol#update li ol li:eq(1)");
var thingToAppend = document.createElement('li');
thingToAppend.innerHTML = ' test ';
item.parentNode.insertBefore(item, thingToAppend);
// or
item.parentNode.appendChild(thingToAppend);
// or apparently.... with jQuery something like:
item.after(thingToAppend);