Tableau Javascript et innerHTML

Je suis tout a commencé avec le JavaScript et j'ai un petit problème.

Comment puis-je utiliser le innerHTML bien-fondé de modifier le texte dans cet élément:

JS:

(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!!
  }
})();

HTML:

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

  • Changement innerHTML = à innerHTML +=.
InformationsquelleAutor Spoofy | 2014-10-11
  1. 5

    Essayer cela, vous avez juste besoin de rejoindre les noms de trop.

    JS:

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

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

showArray();

    HTML:

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

    • +1 C'était un bon catch..;)
    • Cette réponse fonctionne, mais si votre intention est simplement d'insérer du texte dans un nœud DOM, vous devez utiliser innerText au lieu de innerHTML. C'est une bonne habitude qui pourrait vous faire économiser de l'injection de code attaques dans le futur, même s'il n'a pas d'importance dans cet exemple.
    • n'est pas standard. Il devrait être textContent.
    • Oups, my bad. De toute façon, le point est que vous devez être conscient de ce que vous autorisez les utilisateurs à injecter dans les DOM.
    InformationsquelleAutor David Chen
  2. 1

    Juste pour le record: votre code peut être réduite à

    JS:

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

    HTML:

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

    InformationsquelleAutor KooiInc
  3. 0

    Dans ce cas, il vaut mieux utiliser Array.prototype.join comme suggéré dans @DaveChen réponse.

    Cependant, vous ne pouvez pas toujours l'utiliser. Pour ces cas:

    • DOM opérations sont lentes. Par conséquent,
      • Ne pas utiliser getElementById l'intérieur d'une boucle. Au lieu de cela, stocker l'élément dans une variable avant la boucle.
      • Ne pas modifier innerHTML à chaque itération. Au lieu de cela, la mise à jour d'une variable de chaîne et de ne modifier que les innerHTML après la boucle.
    • La création de tableaux à l'aide de [] est plus rapide qu'avec Array constructeur, et c'est plus court.

    Cependant, notez que l'utilisation de innerHTML peut produire html injection. Si vous voulez juste pour ajouter du texte, de mieux utiliser les textContent à la place.

    JS:

    (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;
})();

    HTML:

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

    InformationsquelleAutor Oriol