add li to middle of the ul (jquery)

Question

How one can add li to middle of the ul.

For example if i have list like this:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

And i want to add addiion li (<li>new</li>) after 3rd list?

Why haven't you accepted an answer to this question yet? – Jim G. May 27 '10 at 23:10 — Jim G., May 27 '10 at 23:10

score 31 · Answer 1 · edited Dec 31 '13 at 16:59

31

var middle = Math.ceil($("#myUL li").length / 2);
$("#myUL li:nth-child(" + middle + ")").after('<li>Item New</li>');

edited Dec 31 '13 at 16:59

g3rv4

answered Feb 15 '10 at 21:28

Francisco Aquino

2

middle should have been Math.ceil($("#myUL").children("li").length / 2); as we might encounter nested lists. 2 cents – jronnybravo Nov 06 '13 at 07:09

score 11 · Answer 2 · answered Feb 15 '10 at 21:26

11

Try this out:

$('ul li:nth-child(3)').after('<li>new</li>');

answered Feb 15 '10 at 21:26

PetersenDidIt

2

this assums a fixed number of li items... better use Aquino solution. Thanks anyway :) – numediaweb Mar 23 '13 at 15:56

score 0 · Answer 3 · edited Apr 10 '18 at 12:18

0

Try this:

$('ul li:eq(2)').after(`<li>new</li>`)

Use ' or " within braces I have used ` since it was getting formatted as html.

edited Apr 10 '18 at 12:18

IKavanagh

answered Apr 10 '18 at 11:59

praveen poonja

3 Answers3