appendTo div between li

Question

Hi,

I have the following code

<div id="element1" style="display:none"></div>

<ul>
    <li id="item1">Item 1</li>
    <li id="item2">Item 1</li>
</ul>

On click I want to move element1 after item1

<ul>
    <li id="item1">Item 1</li>
    <div id="element1" style="display:none"></div>
    <li id="item2">Item 1</li>
</ul>

If I use

$('#element1').appendTo('#item1'); 

The element append inside li

<li id="item1">Item 1 <div id="element1">...</div></li>

Any help is appreciated

Answer 1

You can use .insertAfter() for this:

$('#element1').insertAfter('#item1'); 

But a <div> in a <ul> isn't valid HTML, you need to insert only a <li> element here, so I'd wrap it first:

$('#element1').wrap('<li />').parent().insertAfter('#item1');