How to add a list item to an existing unordered list

Question

I have code that looks like this:

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

I'd like to use jQuery to add the following to the list:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

I tried this:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

But that adds the new li inside the last li (just before the closing tag), not after it. What's the best way to add this li?

https://stackoverflow.com/a/70523100/7186739 – Billu Dec 29 '21 at 17:50 — Billu, Dec 29 '21 at 17:50

Paolo Bergantino · Accepted Answer · 2012-10-02T21:36:54.673

853

This would do it:

$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

Two things:

You can just append the <li> to the <ul> itself.
You need to use the opposite type of quotes than what you're using in your HTML. So since you're using double quotes in your attributes, surround the code with single quotes.

edited Oct 02 '12 at 21:36

answered Jul 17 '09 at 19:29

Paolo Bergantino

480,997
81
517
436

21

just as a side note, you can use prepend instead of append in case you want to add as the first element instead of the last – Thomas May 14 '14 at 08:00

score 528 · Answer 2 · edited Jun 05 '21 at 19:07

528

You can also do it in a more 'object' and still easy-to-read way:

$('#content ul').append(
    $('<li>').append(
        $('<a>').attr('href','/user/messages').append(
            $('<span>').attr('class', 'tab').append("Message center")
)));

You don't have to fight with quotes then, but you must keep trace of braces :)

edited Jun 05 '21 at 19:07

Peter Mortensen

30,738
21
105
131

answered Nov 09 '11 at 09:33

Danubian Sailor

1
38
145
223

Wouldn't your approach start new tags but not close them? – everton Jan 12 '12 at 11:04
1

No, jquery creates tags using DOM manipulation, so it has only to know it's name – Danubian Sailor Jan 12 '12 at 13:13
I love this. I hate messing with strings and quotes :) BTW: Other option would be http://stackoverflow.com/a/4673436/112000 – Tomáš Fejfar Apr 10 '12 at 11:53
2

This is by far the more preferable way, that is to use the more object-oriented manner. – Will Nov 09 '13 at 03:38
You can escape any special HTML characters in user-input by using `$('').text(unsafe_user_input)` instead of the direct `append("Message center")`. – famzah Jun 09 '23 at 21:16

score 57 · Answer 3 · edited Jul 25 '15 at 16:59

57

If you are simply adding text in that li, you can use:

 $("#ul").append($("<li>").text("Some Text."));

edited Jul 25 '15 at 16:59

p.campbell

98,673
67
256
322

answered Mar 07 '14 at 00:42

kravits88

12,431
1
51
53

Works like a charm for me after trying all failed solution.. – TarangP Aug 27 '21 at 11:10

score 55 · Answer 4 · answered Jan 18 '12 at 07:06

55

How about using "after" instead of "append".

$("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

".after()" can insert content, specified by the parameter, after each element in the set of matched elements.

answered Jan 18 '12 at 07:06

satomacoto

11,349
2
16
13

3

Thank you, this helped me. To insert into the middle of a list, you need to use `before` or `after`. – Patrick Fisher Feb 12 '12 at 07:50
1

this combined with @Danubian_Sailor's answer hit the spot for me – bkwdesign Sep 10 '15 at 15:00

Ole Haugset · Answer 5 · 2018-01-17T14:15:00.937

jQuery comes with the following options which could fulfil your need in this case:

append is used to add an element at the end of the parent div specified in the selector:

$('ul.tabs').append('<li>An element</li>');

prepend is used to add an element at the top/start of the parent div specified in the selector:

$('ul.tabs').prepend('<li>An element</li>');

insertAfter lets you insert an element of your selection next after an element you specify. Your created element will then be put in the DOM after the specified selector closing tag:

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore will do the opposite of the above:

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

score 18 · Answer 6 · edited Sep 21 '16 at 20:51

18

You should append to the container, not the last element:

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

The append() function should've probably been called add() in jQuery because it sometimes confuses people. You would think it appends something after the given element, while it actually adds it to the element.

edited Sep 21 '16 at 20:51

Dan Dascalescu

143,271
52
317
404

answered Jul 17 '09 at 19:30

Philippe Leybaert

168,566
31
210
223

score 7 · Answer 7 · edited Jul 17 '09 at 19:31

7

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

edited Jul 17 '09 at 19:31

acrosman

12,814
10
39
55

answered Jul 17 '09 at 19:29

Evan Meagher

4,517
21
18

An explanation would be in order. For instance, [user *"Dipak"* wrote](https://stackoverflow.com/questions/1145208/how-to-add-a-list-item-to-an-existing-unordered-list#comment14077672_1145215): *"Shouldn't it be '#header' instead of '#content'?"* – Peter Mortensen Jun 05 '21 at 19:05

score 7 · Answer 8 · answered Jul 17 '09 at 19:32

7

Instead of

$("#header ul li:last")

try

$("#header ul")

answered Jul 17 '09 at 19:32

Adrian Godong

8,802
8
40
62

score 7 · Answer 9 · edited Jun 05 '21 at 19:09

7

Use:

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

Here is some feedback regarding code readability (shameless plug for a blog). http://coderob.wordpress.com/2012/02/02/code-readability

Consider separating the declaration of your new elements from the action of adding them to your UL.. It would look something like this:

var tabSpan = $('<span/>', {
    html: 'Message Center'
});
var messageCenterAnchor = $('<a/>', {
    href='/user/messages',
    html: tabSpan
});
var newListItem = $('<li/>', {
    html: messageCenterAnchor,
    "id": "myIDGoesHere"
});    // NOTE: you have to put quotes around "id" for IE..

$("content ul").append(newListItem);

edited Jun 05 '21 at 19:09

Peter Mortensen

30,738
21
105
131

answered Feb 02 '12 at 17:32

undeniablyrob

1,339
2
16
16

var newListItem = $('

jmogera

Apr 15 '12 at 05:11

@jmogera, are you trying to set the id? If so, you can just do that inside the { }'s. I updated the code above :) – undeniablyrob May 08 '12 at 18:36

The link is (effectively broken): *"Oops! That page can’t be found."* – Peter Mortensen Jun 05 '21 at 19:10

score 6 · Answer 10 · edited Jun 05 '21 at 19:11

6

Use:

// Creating and adding an element to the page at the same time.
$("ul").append("<li>list item</li>");

edited Jun 05 '21 at 19:11

Peter Mortensen

30,738
21
105
131

answered Sep 21 '15 at 09:19

Kaleem Ullah

6,799
3
42
47

score 4 · Answer 11 · edited Jun 05 '21 at 19:11

4

This is the shortest way you can do that:

list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);

Where blocks is an array. And you need to loop through the array.

edited Jun 05 '21 at 19:11

Peter Mortensen

30,738
21
105
131

answered May 25 '16 at 03:24

user3516328

99
7

score 2 · Answer 12 · answered Sep 30 '14 at 12:49

2

This is another one

$("#header ul li").last().html('<li> Menu 5 </li>');

answered Sep 30 '14 at 12:49

Mahendra Jella

5,450
1
33
38

Billu · Answer 13 · 2022-01-07T21:58:17.543

1

Add li in ul as first item using prepend() function of jquery

$("ul").prepend("<li>first item</li>");

Add li in ul as last item using append() function of jquery

$("ul").append("<li>last item</li>");

edited Jan 07 '22 at 21:58

answered Dec 29 '21 at 17:49

Billu

2,733
26
47

score 0 · Answer 14 · answered Jun 17 '20 at 11:25

Just to add to this thread - if you are moving an existing item you will need to use clone and then true/false on whether you clone/deep-clone the events as well (https://api.jquery.com/clone/).

Example: $("#content ul").append($('.existing_li').clone(true));

How to add a list item to an existing unordered list

14 Answers14

Linked

Related