I'm just started with JavaScript and I have a little problem.

How do I use the innerHTML propriety to change the text in this element:

(function showArray(){
  var names = new Array("Bob ","Alice ","Ceaser ","David");
  names.sort();

  for (var i = 0; i < names.length; i++) {
    document.getElementById("loop").innerHTML = names[i];
    // I'm only getting "David" as output!!
  }
})();

<p id="loop">David Alice Bob Ceaser</p>

I'm just started with JavaScript and I have a little problem.

How do I use the innerHTML propriety to change the text in this element:

(function showArray(){
  var names = new Array("Bob ","Alice ","Ceaser ","David");
  names.sort();

  for (var i = 0; i < names.length; i++) {
    document.getElementById("loop").innerHTML = names[i];
    // I'm only getting "David" as output!!
  }
})();

<p id="loop">David Alice Bob Ceaser</p>

• javascript
• arrays
• innerhtml

Share Improve this question Follow edited Oct 11, 2014 at 16:08 Oriol 289k7171 gold badges457457 silver badges530530 bronze badges asked Oct 11, 2014 at 16:02 SpoofySpoofy 65144 gold badges1010 silver badges2727 bronze badges 1

• 4 Change innerHTML = to innerHTML +=. – user663031 Commented Oct 11, 2014 at 18:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Try this, you just need to join the names too.

function showArray() {
  var names = new Array("Bob ", "Alice ", "Ceaser ", "David");
  names.sort();

  document.getElementById("loop").innerHTML = names.join(" ");
}

showArray();

<p id="loop">David Alice Bob Ceaser</p>

Just for the record: your code can be reduced to

 (function() {
   document.querySelector("#loop").innerHTML = 
       ["Bob ", "Alice ", "Ceaser ", "David"].sort().join(" ");
 }())

<p id="loop"></p>

In this case, better use Array.prototype.join as suggested in @DaveChen's answer.

However, you can't always use that. For those cases:

• DOM operations are slow. Therefore,
  • Don't use getElementById inside a loop. Instead, store the element in a variable before the loop.
  • Don't modify innerHTML at each iteration. Instead, update a string variable and only modify innerHTML after the loop.
• Creating arrays using [] is faster than with Array constructor, and it's shorter.

However, note that using innerHTML may produce html injection. If you just want to add text, better use textContent instead.

(function showArray(){
  var names = ["Bob ","Alice ","Ceaser ","David"],
      el = document.getElementById("loop"),
      html = '';
  names.sort();
  for (var i = 0; i < names.length; i++) html += names[i];
  el.textContent = html;
})();

<p id="loop">David Alice Bob Ceaser</p>