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

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?

CodePudding user response：

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

CodePudding user response：

<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.