Javascript append html tags before for loop

Question

I have the following code below, where I am trying to create a ul tag, and inside it a for loop to dynamically create li elements. A separate closing ul tag is created after the loop is completed.

The code works. Except for the problem that the code does not run in order like I want it to. The ul tags are closed before the for loop can be processed into the page, resulting in the html looking more like:

<ul></ul><li>0</li><li>1</li>...

var insidethediv = document.getElementById("insidethediv");
var numero = 5;

insidethediv.innerHTML = "<ul>";
for (i = 0; i < 5; i++){
insidethediv.innerHTML += "<li>"+i+"</li>";
}
insidethediv.innerHTML += "</ul>";

<div id="insidethediv"></div>

safsaf32 · Accepted Answer · 2017-11-11 04:23:38Z

2

Assigning directly to innerHTML is a bad idea here. innerHTML expects a complete html fragment, i.e. all open tags should be closed. But here you are assigning to a partial html fragment while you are building it. Try to create the complete html first and then assign it to innerHTML, e.g. like so:

var insidethediv = document.getElementById("insidethediv");
var numero = 5;

var s = "<ul>";
for (i = 0; i < 5; i++){
    s += "<li>"+i+"</li>";
}
s += "</ul>";
insidethediv.innerHTML = s;

answered Nov 11, 2017 at 4:23

safsaf32

1,5872 gold badges15 silver badges21 bronze badges

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

Comments

L. Cang · Accepted Answer · 2017-11-11 15:43:41Z

1

I personally prefer to use document.createElement(tag name) and Element.append(created element reference) functions. In this way we are able to manipulate each individual <li> tag (such as assign different colors) and render the HTML tags dynamically instead of jamming everything into a string then insert it as an innerHTML element.

var insidethediv = document.getElementById("insidethediv");
var numero = 5;

var ul_element = document.createElement("ul");
insidethediv.append(ul_element);

var li_element;

for (var i = 0; i < 5; i++){
    li_element = document.createElement("li");
    ul_element.append(li_element);
    li_element.innerHTML = i;
}

<div id="insidethediv"></div>

edited Nov 11, 2017 at 15:43

answered Nov 11, 2017 at 5:01

L. Cang

476 bronze badges

Collectives™ on Stack Overflow

Javascript append html tags before for loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related