Javascript массив и innerHTML

Question

Я только начал с JavaScript, и у меня есть небольшая проблема.

Как использовать innerHTML уместность, чтобы изменить текст в этом элементе:

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

Answer 1

Попробуйте это, нужно просто присоединиться имена тоже.

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>

Answer 2

В этом случае лучше использовать Array.prototype.join как предложено в @DaveChen's answer.

Однако вы не всегда можете использовать это. В этих случаях:

• Операции DOM медленные. Поэтому
  • Не используйте getElementById внутри петли. Вместо этого сохраните элемент в переменной перед циклом.
  • Не изменяйте innerHTML на каждой итерации. Вместо этого обновите строковую переменную и измените только innerHTML после цикла.
• Создание массивов с использованием [] выполняется быстрее, чем при использовании конструктора Array, и это короче.

Однако обратите внимание, что использование innerHTML может производить инъекцию html. Если вы просто хотите добавить текст, лучше используйте textContent.

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

Answer 3

Только для записи: ваш код может быть уменьшен до

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

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