stackoverflow.com ul li

Question

I'm trying to use the append function and encountered this:

$("#details").append('<ul>');
for (var i = 0; i < 10; i++) {
    $("#details").append('<li>something</li>');
}
$("#details").append('</ul>');

It appears that the <li> elements renders OUTSIDE the <ul> tag.

Is this a jQuery bug?

chaos · Accepted Answer · 2009-07-14 15:35:32Z

up vote 54 down vote accepted

No, it's a programmer bug. <li>s are attached to their <ul> or <ol>, not to its container. And appending a close tag is nonsensical.

You're basically working as if what you were appending were raw HTML, and it's not; you're actually working with the DOM.

Try this:

var list = $("#details").append('<ul></ul>').find('ul');
for (var i = 0; i < 10; i++)
    list.append('<li>something</li>');

Note: please see (and upvote) Blixt's answer, which expands on a couple different options that are superior for various purposes. It deserves attention and hasn't been getting it.

edited Jul 14 '09 at 15:35

answered Jul 14 '09 at 15:12

chaos

93.8k 21 253 282

Ah, should have known this. Thanks a lot. – Brian Liang Jul 14 '09 at 15:15

2

That will return the #details element and put it in list. Then the <li> elements will be added to the#details element. You need to select the <ul> element after creating it. – Blixt Jul 14 '09 at 15:17

Thanks, Blixt. I was trying to research whether append() returned the parent or child and wasn't having any luck. – chaos Jul 14 '09 at 15:19

3

It is better to put all li's into a string or better an array and append only once at the end. Especially if you have long lists. – redsquare Jul 14 '09 at 15:23

1

He meant the .append('</ul>') operation. In the DOM, you don't have an object for closing tags; a single DOM object represents the whole tag and its contents. – Blixt Jul 14 '09 at 15:38

show 4 more comments

Blixt · Answer 2 · 2009-07-14 15:35:25Z

Nope, you can't use it like that. append is an atomic operation, which creates the element directly.

// The <ul> element is added to #details, then it is selected and the jQuery
// selection is put in the "list" variable.
var list = $('<ul/>').appendTo('#details');
for (var i = 0; i < 10; i++) {
    // New <li> elements are created here and added to the <ul> element.
    list.append('<li>something</li>');
}

Alternatively, generate the HTML and add it all at once (this will be more similar to your original code):

var html = '<ul>';
for (var i = 0; i < 10; i++) {
    html += '<li>something</li>';
}
html += '</ul>';
$('#details').append(html);

This code is noticeably faster when dealing with many elements.

If you need a reference to the list, just do the following instead of $('#details').append(html);:

var list = $(html).appendTo('#details');

Could you please elaborate on why the closing </UL> is not needed when doing append? Thanks so much. — Sabuncu, Dec 11 '16 at 21:31
@Sabuncu In the first example, the DOM nodes are being created programmatically so the first call ($('<ul/>')) already created the <ul> node, then the <li> nodes are added to it. The closing </ul>tag is only used for parsing HTML (turning it into a DOM node tree) and tells the parser when to move one step up the tree (out of the <ul> node). — Blixt, Dec 11 '16 at 22:40
Thank you so much. I think I understand; in DOM, there are no opening/closing tags, as objects are already defined to have a type, such as a UL. Some examples I have seen elsewhere use <ul{SPACE}/> (I added the {SPACE} for emphasis) but I guess the space is optional? — Sabuncu, Dec 11 '16 at 22:44

Russ Cam · Answer 3 · 2009-07-14 15:45:12Z

I think there's a problem in your loop

for (var i = - i < 10; i++)
    $("#details").append('<li>something</li>');

should be I think

for (var i = 0; i < 10; i++)
    $("#details ul").append('<li>something</li>');

and lose the following from the end

$("#details").append('</ul>');

Working Demo

EDIT:

Based on George IV's comment, in order to avoid appending <li> elements to any <ul> that may be a child of the element with id "details", simply give the <ul> element an id when you append it-

$("#details").append('<ul id="appended">');

for (var i = 0; i < 10; i++)
    $("#appended").append('<li>something</li>');

you may also find this article interesting - 43,439 reasons to use append() correctly

whoa there! bad selector: "#details ul". what if there is more than one unordered list that is a child of #details? — geowa4, Jul 14 '09 at 15:18
give it an id when you append it and then use the id. I've based the answer on what is given in the question and made no assumptions about the rest of the OP's markup — Russ Cam, Jul 14 '09 at 15:21

spoulson · Answer 4 · 2009-07-14 15:33:48Z

up vote 1 down vote

For a small static list, I prefer to unroll into a single expression.

$('#details')
   .append($('<ul/>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
   );

answered Jul 14 '09 at 15:33

spoulson

17.3k 12 60 96

That won't work though, because you'll be appending the <li> elements to the #details element. You could do it like this: $('<ul/>').appendTo('#details').append('<li>something</li>')‌.append(... – Blixt Jul 14 '09 at 15:37

1

Pay closer attention to the parens and indentation... – spoulson Jul 14 '09 at 15:38

You're right, I see now. I find it a bit confusing, but that's just my opinion of course. – Blixt Jul 14 '09 at 15:44

It's just my style. The indents make it clear to me. All others can resort to, IMHO, less readable loop constructs. I ♥ Functional Programming – spoulson Jul 14 '09 at 17:40

add a comment

score 0 · Answer 5

I would use something like if you have the data in an Array.

var appendToUl = array.join("

+ array+");

It is much faster

stackoverflow.com ul li

5 Answers