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>

nothing work to me because when i used the element be After all the ul and i want it After every ul — Soufiane Douimia
– Soufiane Douimia, Commented Jun 22, 2015 at 19:36
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. — epascarello
– epascarello, Commented Jun 22, 2015 at 20:06

epascarello · Accepted Answer · 2015-06-22 19:42:11Z

2

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>

edited Jun 22, 2015 at 19:42

answered Jun 22, 2015 at 19:34

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add an element with jQuery or Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related