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>
  

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 oute 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 oute 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>

• javascript
• html

Share Improve this question Follow asked Jan 9, 2018 at 13:20 YlamaYlama 2,48922 gold badges3131 silver badges5252 bronze badges 3

• 1 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 Commented Jan 9, 2018 at 13:23
• 1 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 Commented Jan 9, 2018 at 13:28
• thanks @epascarello i actually tested it now and realized whats happening thanks for explanation. – Ylama Commented Jan 9, 2018 at 13:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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;

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>

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>

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.