Question

What is the best way to insert a new li element into a specific position of a nested set model?

For example, the following list:

<ol class="nested">
    <li id="list_1"></li>
    <li id="list_2">
        <ol>
            <li id="list_3"></li>
            <li id="list_4"></li>
        </ol>
    </li>
    <li id="list_5"></li>
</ol>

Let’s say I want to insert a new li as a child of #list_2
I can do like that:

$('#list_'+parent_ID+' ol > li:last-child').after('<li id=""></li>');

But wouldn’t work if parent was going to be #list_1 or #list_4
Any ideas !?

Answer 1

There are many ways. One may be this:

if ($('#list_'+parent_ID+' ol').length > 0) {
  $('#list_'+parent_ID+' ol > li:last-child').after('<li id=""></li>');
} else {
  $('#list_'+parent_ID).append('<ol><li id=""></li></ol>');
}

You can test here.