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. — user400654
– user400654, Commented Aug 29, 2012 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
– Dave Newton, Commented Aug 29, 2012 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: stackoverflow.com/questions/327047/… — Per Salbark
– Per Salbark, Commented Aug 29, 2012 at 14:28

user400654 · Accepted Answer · 2012-08-29 14:19:19Z

1

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.

answered Aug 29, 2012 at 14:19

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon Arnold · Accepted Answer · 2012-08-29 14:19:51Z

1

Use clone.

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

answered Aug 29, 2012 at 14:19

Simon Arnold

16.2k8 gold badges70 silver badges89 bronze badges

Comments

Ram · Accepted Answer · 2012-08-29 14:20:02Z

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, 2012 at 14:20

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Per Salbark · Accepted Answer · 2012-08-29 14:18:54Z

0

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.

answered Aug 29, 2012 at 14:18

Per Salbark

3,6431 gold badge25 silver badges24 bronze badges

Comments

Alex · Accepted Answer · 2012-08-29 14:22:01Z

0

You could use a while loop:

var i = 1;

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

answered Aug 29, 2012 at 14:22

Alex

9,0612 gold badges29 silver badges44 bronze badges

Comments

adeneo · Accepted Answer · 2012-08-29 14:29:49Z

0

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

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

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

answered Aug 29, 2012 at 14:29

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

How to generate an html list by using jquery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related