Question

I crossed uppon a weird problem. I have a list with links like so:

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

What I want to do is make jQuery split the list in two by inserting closing and then opening tags after, say, the third list item. So I go like so:

$('.sub-navigation li').eq(2).after('google');

It properly inserts the text and I get:

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>google
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

which is correct, but when I try to insert the actual tags like so:

$('.sub-navigation li').eq(2).after('</ul><ul class="sub-navigation">');

it reverses them o_O

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li><ul class="sub-navigation"></ul>
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

Why is that so? Can’t before() just insert the raw HTML I gave it?
If I try to insert just </ul> it dissapears…

Thanks in advance!

Answer 1

jQuery methods such as before() and after() manipulate the browser’s DOM tree.
The DOM holds complete HTML elements. You can’t put in half of a tag.

Instead, you need to manipulate entire tags:

$('.sub-navigation li:eq(2)').nextAll().remove().appendTo(
    $('<ul class="sub-navigation">').insertAfter($('.sub-navigation'))
)