How to add an element with jQuery or Javascript

Question

I want to know how to add an HTML element with jQuery or Javascript after another element

for example, from this

<ul>
<li> .... </li>
<li> .... </li>
<li> .... </li>
</ul>

to this

<ul>
<li> .... </li>
<div>..</div>
<li> .... </li>
<div>..</div>
<li> .... </li>
<div>..</div>
</ul>

• depperm: I would look at jquery after(), api.jquery.com/after
• Soufiane Douimia: I tried the append() Method and after()
• epascarello: That is invalid HTML so the answer is NO
• Soufiane Douimia: nothing work to me because when i used the element be After all the ul and i want it After every ul
• epascarello: Do you understand the issue after reading my answer below? A div can not be a child of a UL so you can not add the div after the li in the DOM tree. The ul expects to find li's as the children. When you try to add the div, it will try to figure out the best fit and it is probably adding the new div after the UL.

Answer 1

You can not append a divas a child of a UL so no you can not add the div element after the li. The browser will "fix" your bad HTML the best as it can and not every browser will do the same thing.

If you append and li that has a div as a child, it will work correctly.

$("li").after("<li><div>New</div></li>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
 <li> .... </li>
 <li> .... </li>
 <li> .... </li>
</ul>