How to generate an html list by using jquery

Question

Why the following code (1) does not give me the following output (2)

(1)

var $ul = $('<ul>');
var $li = $('<li>').text('text');
$ul.append($li);
$ul.append($li);
$ul.append($li);
$('<div>').append($ul);

(2)

<div>
   <ul>
     <li> text <li>
     <li> text <li>
     <li> text <li>
   </ul>
</div>

You are appending the same li over and over and over rather than creating a new one. — Kevin B, Aug 29 '12 at 14:17
Why would it? You don't do anything with the HTML you're generating even if you weren't appending the same list item. Also, when asking, it's best to describe the behavior you *are* seeing, to make the question even easier to answer. — Dave Newton, Aug 29 '12 at 14:19
There are a lot of different answers posted here. Some of which suggest different methods of creating the new elements. Here is a long discussion on what to do, and why: http://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery — Per Salbark, Aug 29 '12 at 14:28

score 1 · Answer 1 · answered Aug 29 '12 at 14:19

You are appending the same li over and over and over rather than creating a new one.

I suggest instead creating an html string and appending it all at once.

var strHTML = "<div><ul>";
strHTML += "<li>text</li>";
strHTML += "<li>text</li>";
strHTML += "<li>text</li>";
strHTML += "</ul></div>";
var elements = $(strHTML);

//OR in jQuery 1.8.0+    
//var elements = $.parseHTML(strHTML);

Also, you should always pass comlete html into $(), meaning $("<li />") instead of $("<li>") otherwise later on when you upgrade jQuery you'll have a lot of work to do.

score 1 · Answer 2 · answered Aug 29 '12 at 14:19

1

Use clone.

$li.clone().appendTo('ul');

answered Aug 29 '12 at 14:19

Simon Arnold

15,849
7
67
85

score 1 · Answer 3 · answered Aug 29 '12 at 14:20

1

You can use clone() method.

var $ul = $('</ul>');
var $li = $('</li>', {text:'text'});
$ul.append($li.clone());
$ul.append($li.clone());
$ul.append($li.clone());
$('<div/>').append($ul)

answered Aug 29 '12 at 14:20

Ram

143,282
16
168
197

score 0 · Answer 4 · answered Aug 29 '12 at 14:18

Try

$("<div/>")
    .append(
       $("<ul/>")
          .append(
              $("<li/>")
                  .text(" text ")
          )
          .append(
              $("<li/>")
                  .text(" text ")
          )
          .append(
              $("<li/>")
                  .text(" text ")
          )
    );

When you append the same $li several times you are just movin it around. You need to create a new one for each append.

score 0 · Answer 5 · answered Aug 29 '12 at 14:22

0

You could use a while loop:

var i = 1;

while (i <= 3){
    $('ul').append('<li>Text</li>');
    i=i+1;
}

answered Aug 29 '12 at 14:22

Alex

8,875
2
27
44

score 0 · Answer 6 · answered Aug 29 '12 at 14:29

0

var $ul = $('<ul />');

for (i=0; i<3; i++) {
    $ul.append($('<li />', {text : 'text'}));
}

$('<div>').append($ul);

answered Aug 29 '12 at 14:29

adeneo

312,895
29
395
388

How to generate an html list by using jquery

6 Answers6