How to move a div inside <ul> on top of <li>

Question

I am stuck in this situation where I have to move a div inside the List. I tried appendChlid and insertBefore but I can't seem to make it work. The code is as following:

 <div class='error'>Content</div> <div class='form'> <ul> <li>Item1</li> <li>item2</li> <li>Item3</li> </ul> </div>

I want the result to look like:

 <div class='form'> <ul> <div class='error'>Content</div> <li>Item1</li> <li>item2</li> <li>Item3</li> </ul> </div>

What is the best way to make this work?

Answer 1

That is not possible because ul does not allow div elements.

Permitted content: Zero or more li , script and template elements.

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Answer 2

<div class='error'>Content</div>
   <div class='form'>
   <ul>
      <li id="first-li">Item1</li>
      <li>item2</li>
      <li>Item3</li>
   </ul>
</div>
$('.error').insertBefore('#first-li');

Hope this help.