jQuery appending HTML tags after a loop

Question

I'm appending HTML code into a div, it's an unordered list. So first I do:

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

This works as expected. Then I do a loop for the list items:

$.each(headings, function(index, heading){
    $('.placeholder').append('<li>' + heading + '</li>');
})

Then append the closing ul tag

$('.placeholder').append('</ul>');

The problem is the code comes out like so:

<ul></ul>
<li></li>
<li></li>
<li></li>

Why is it appending the closing ul tag at the beginning of the each loop when the code is written so it appends it afterwards?

appending is NOT like building a string. You are creating a single element. You need to append the lis to the ul that you created. — epascarello
– epascarello, Commented Mar 2, 2018 at 14:38
$('.placeholder ul').append('<li>' + heading + '</li>'); and ditch $('.placeholder').append('</ul>'); — connexo
– connexo, Commented Mar 2, 2018 at 14:58

Zenoo · Accepted Answer · 2018-03-02 14:38:32Z

2

You don't need to do .append('</ul>');. .append('<ul>'); has already added the full ul node to the HTML.

Plus, you need to add your lis inside your ul, not inside .placeholder :

$.each(headings, function(index, heading){
    $('.placeholder ul').append('<li>' + heading + '</li>');
})

answered Mar 2, 2018 at 14:38

Zenoo

12.9k4 gold badges48 silver badges71 bronze badges

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

Comments

Jeffrey Roosendaal · Accepted Answer · 2018-03-02 14:38:03Z

1

Append both the starting and closing tag:

$('.placeholder').append('<ul></ul>');

Then append your <li>'s inside your <ul>:

$.each(headings, function(index, heading) {
    $('.placeholder ul').append('<li>' + heading + '</li>');
})

answered Mar 2, 2018 at 14:38

7,1978 gold badges45 silver badges58 bronze badges

Taplar · Accepted Answer · 2018-03-02 14:47:24Z

0

Use map instead to append them all at once, at the end.

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

$ul.append(
  $.map(headings, function(element){
    return '<li>' + element + '</li>';
  })
);

$('.placeholder').append($ul);

answered Mar 2, 2018 at 14:47

Taplar

25k4 gold badges24 silver badges36 bronze badges