Is there a quick and easy way of using jQuery to insert an
into the middle of an
?

Question

I know I can use append() to add an 'li' to the end of a list, but how would I add it to a specific index? Would I just have to manipulate an array and then refresh the list with the updated array? Or is there already a function written in jQuery that allows me to do this?

I have tried looking in the jQuery API Documentation, but I just started with JavaScript earlier this week and I am having trouble understanding everything.

This is what I am currently using to append the 'li' to the 'ol': $('.todos').append(todoLi); — Anthony Yershov, May 12 '15 at 18:42
http://stackoverflow.com/a/2932205/4028085 use `after()` instead of `append()` — brso05, May 12 '15 at 18:43

score 0 · Answer 1 · answered May 12 '15 at 18:44

0

Use a combination of nth-child() and after

$( ".todos li:nth-child(2)" ).after(todoLi);

If you want to insert todoLi after the 2nd item in the list.

answered May 12 '15 at 18:44

Tuan Anh Hoang-Vu

1,994
1
21
32

score 0 · Answer 2 · answered May 12 '15 at 18:44

0

Here is a quick snippet to show you how .after() works.

$('ul li:eq(1)').after("<li>hello world</li>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

answered May 12 '15 at 18:44

xengravity

3,501
18
27

score 0 · Answer 3 · answered May 12 '15 at 18:45

0

You could try it like this, where index is whatever spot you'd like to insert at.

var index = 3;
$('ul li:nth-of-type('+index+')').after('<li><a href="/link">Zac was here</a></li>')

answered May 12 '15 at 18:45

zacbrac

35
5

score 0 · Answer 4 · answered May 12 '15 at 18:45

0

$('ol li').eq(index).after(your_element);

answered May 12 '15 at 18:45

Samurai

3,724
5
27
39

score 0 · Answer 5 · answered May 12 '15 at 18:45

0

Just figure out which element is in the middle and insertAfter it.

var newLi = $('<li></li')
var halfway = Math.floor($('ol > li').length);
newLi.insertAfter($('ol > li')[halfway]);

answered May 12 '15 at 18:45

Dylan Watt

3,357
12
16

score 0 · Answer 6 · answered May 12 '15 at 18:47

0

You can try using the jQuery .after() method utilizing the :nth-child() selector. For example, if you wanted to try adding your li after the 2nd li and before the 3rd

$( "ul li:nth-child(2)" ).after('<li>added!</li>');

answered May 12 '15 at 18:47

janamargaret

126
2

Karl-André Gagnon · Accepted Answer · 2015-05-12T19:29:23.750

jQuery has a function to add an element after or before a node (.before()/.after()).

You can then use .eq() to select an element and place your element where you want.

Here a little function that do what you want (0 based index). It is important to check if the index element exist, else it will never be put in the DOM:

function appendAt($what, $to, index){
    var $target = $to.children().eq(Math.max(0, index));
    if($target.length !== 0){
        $target.before($what);
    }else{
        $what.appendTo($to);
    }
}

//Use it like that
appendAt($('<li>'), $('.todos'), 5); //The li with become the 6th element.

score 0 · Answer 8 · answered May 12 '15 at 18:55

<ol class="list">
    <li><a href="#">list 1</a></li>
    <li class="active"><a href="#">list 2</a></li>
    <li><a href="#">New Tag</a></li>
    <li><a href="#">list 3</a></li>
    <li><a href="#">list 4</a></li>
</ol>

$('li.active').after('<li><a href="#">New Tag</a></li>');

score 0 · Answer 9 · answered May 12 '15 at 19:17

0

Simple way would be

var newLi="<li>This is test</li>";
$(".list li:nth-child(2)").after(newLi);

Remember the child index starts from 1, so 2 here means after the second li

answered May 12 '15 at 19:17

Raj Nandan Sharma

3,694
3
32
42

Is there a quick and easy way of using jQuery to insert an into the middle of an ?

9 Answers9

Is there a quick and easy way of using jQuery to insert an
into the middle of an
?