adding to innerHTML after JavaScript for loop

Question

So im just testing a basic functionality on JavaScript. Im trying to set the <li> within the <ul> but for some simple reason my li gets placed outside the ul.

var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
    
test.innerHTML += '<ul>'; 
for (var i = 0; i < data[i]; i++)
{
test.innerHTML += '<li>' + i + '=' + data[i] + '</li>';
} 
test.innerHTML += '</ul>';

.start{
    border: 1px solid #000;
}

  
     <div class="start" id="testdiv"></div>

Current html outcome looks like this:

<div class="start" id="testdiv">
 <ul></ul>
 <li>0=1</li>
 <li>1=2</li>
 <li>2=3</li>
 <li>3=4</li>
 <li>4=5</li>
</div>

Expected outcome with an simple explanation would be much appreciated.

<div class="start" id="testdiv">
  <ul>
   <li>0=1</li>
   <li>1=2</li>
   <li>2=3</li>
   <li>3=4</li>
   <li>4=5</li>
  </ul>
</div>

You're writing to the DOM, not to document file. In the DOM, you can create whole elements only, and they are placed to the DOM at once. — Teemu
– Teemu, Commented Jan 9, 2018 at 13:23
Building html with innerHTML is NOT like building a string. when you just do test.innerHTML += '<ul>'; The browser is actually doing this: test.innerHTML += '<ul></ul>'; so it is closed. — epascarello
– epascarello, Commented Jan 9, 2018 at 13:28
thanks @epascarello i actually tested it now and realized whats happening thanks for explanation. — Ylama
– Ylama, Commented Jan 9, 2018 at 13:30

Alexander · Accepted Answer · 2018-01-09 13:35:12Z

5

@MikeChristensen explains why it is bad practice to use innerHtml within for loop.

Every time innerHTML is set, the HTML has to be parsed, a DOM constructed, and inserted into the document.

Try to use temporary string variable instead:

var myList = '<ul>';
for (var i = 0; i < data[i]; i++) { 
  myList += '<li>' + i + '=' + data[i] + '</li>'; 
} 
myList += '</ul>';
test.innerHTML = myList;

edited Jan 9, 2018 at 13:35

answered Jan 9, 2018 at 13:27

Alexander

4,5527 gold badges31 silver badges46 bronze badges

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

4 Comments

Alexander Over a year ago

@Ylama , I saw additional question from you. But I don't see the message now. Do you still have a question or you solve it yourself?

Ylama Over a year ago

Yess @Alexander please help me understand, why if myList is part of the loop only gets added once? your anwser is exactly 100% correct what i want it just confuses me that the 'li' gets populated 5times and the ul once but they are in the same loop, hope it makes sense what im asking?

Alexander Over a year ago

var myList = '<ul>' sets initial accumulator value. Then the myList is concatenated with <li>...</li> for each element of the data array (see += assignment operator). Finally, we append close `</ul> tag and insert accumulated string into HTML block. My code is same as your, but I build string at first, and then write it to HTML.

Ylama Over a year ago

Thanks @Alexander now i understand much better!

Lalit · Accepted Answer · 2018-01-09 13:24:09Z

5

Instead of using above approach you can use below one.

Possible reason is browser might adding the closing tag automatically to the opened tag.

var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
var ulelement = document.createElement("ul");    
for (var i = 0; i < data[i]; i++)
{
ulelement.innerHTML += '<li>' + i + '=' + data[i] + '</li>';
} 
test.appendChild(ulelement);

.start{
    border: 1px solid #000;
}

<div class="start" id="testdiv"></div>

answered Jan 9, 2018 at 13:24

Lalit

1,3691 gold badge8 silver badges13 bronze badges

2 Comments

Ylama Over a year ago

nice interesting approach , thanks for the help, so the browser ads closing tags automatically?

Ylama Over a year ago

actually tested it and it does add the closing tag automatically.. so my approach is wrong but i actually got this out a book and could not understand why its not working.

Luis felipe De jesus Munoz · Accepted Answer · 2018-01-09 13:24:05Z

0

Use appendChild() method instead:

var test = document.getElementById('testdiv');
var ul = document.createElement('UL');

var data = [1,2,3,4,5];
    
for (var i = 0; i < data[i]; i++)
{
  var li = document.createElement('LI');
  li.innerHTML = i + '=' + data[i];
  ul.appendChild(li);
} 

test.appendChild(ul)

.start{
    border: 1px solid #000;
}

<div class="start" id="testdiv"></div>

answered Jan 9, 2018 at 13:24

Luis felipe De jesus Munoz

8,0133 gold badges38 silver badges54 bronze badges

Comments

hardik patel · Accepted Answer · 2021-02-02 09:48:02Z

0

I had problem with li last element was not getting populated in my case.

I changed my code From

$('.ul_food_item').innerHTML = li_elem_new;

To

$('.ul_food_item').html(li_elem_new);

My problem was solved.

answered Feb 2, 2021 at 9:48

hardik patel

2784 silver badges9 bronze badges

Collectives™ on Stack Overflow

adding to innerHTML after JavaScript for loop

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related