Ajouter un Tableau dans une Liste non ordonnée

Ce que je suis en train de réaliser avec ce code est à la sortie de la matrice de alphabet comme une série d'éléments de liste dans une liste non ordonnée de la majoration réelle. J'ai le tableau dans la liste des éléments, mais je ne peux pas comprendre comment le dire à ajouter lui-même à une liste non ordonnée <ul id="itemList"></ul>. 

var itemsExist = true;
var indexNum = 0;
var unorderedList = document.getElementById('itemList');
var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");

function write_letters(){

    for (i = 0; i < alphabet.length; i++ ) {
        document.write('<li>'  + alphabet[indexNum++] + '</li>');
    }

}

if (itemsExist){
    write_letters();
} else {
    document.write("error!");
}

OriginalL'auteur nnash | 2010-08-26

  1. 8

    Ne pas utiliser document.write de le faire. Vous devez agir comme ceci:

    function write_letters(){
    var letters = "";

    for (var i = 0; i < alphabet.length; i++ ) {
        //Also I don't understand the purpose of the indexNum variable.
        //letters += "<li>"  + alphabet[indexNum++] + "</li>";
        letters += "<li>"  + alphabet[i] + "</li>";
    }

    document.getElementById("itemList").innerHTML = letters;
}

    Plus la bonne façon est d'utiliser des DOM (dans le cas où vous voulez le plein contrôle de ce qui arrive):

    function write_letters(){
    var items = document.getElementById("itemList");

    for (var i = 0; i < alphabet.length; i++ ) {
        var item = document.createElement("li");
        item.innerHTML = alphabet[i];
        items.appendChild(item);
    }

}
    Merci, cela fonctionne parfaitement; je vais faire un peu de lecture sur .innerHTML. Le but de indexNum était une sorte de hackish permet d'incrémenter la valeur de l'indice de la matrice. En regardant ton code est évident que je faisais fausse route.

    OriginalL'auteur Daniel O'Hara

  2. 2

    Vous pouvez utiliser une combinaison de createElement() et appendChild() pour ajouter de nouveaux éléments HTML à l'intérieur d'un autre élément HTML. Le code ci-dessous devrait vous aider:

    <html>

<head>
<title>Script Test</title>
</head>

<body>
    <ul id="itemList"></ul>
</body>

<script>
    var itemsExist = true;
    var indexNum = 0;
    var unorderedList = document.getElementById('itemList');
    var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
    var myElement;

    function write_letters(){

        for (i = 0; i < alphabet.length; i++ ) {
            //Create the <LI> element
            myElement = document.createElement("LI");
            //Add the letter between the <LI> tags
            myElement.innerHTML = alphabet[indexNum++];
            //Append the <LI> to the bottom of the <UL> element
            unorderedList.appendChild(myElement);
        }
    }

    if (itemsExist){
        write_letters();
    } else {
        document.write("error!");
    }
</script>

</html>

    Notez comment le script existe au-dessous de la balise body. Ceci est important si vous voulez que votre script fonctionne de la façon dont vous avez écrit. Autrement document.getElementById ("itemList') ne permettra pas de trouver le "itemList' ID.

    Si vous allez être en utilisant le DOM, vous devez également utiliser les nœuds de texte (myElement.appendChild(document.createTextNode(alphabet[indexNum++]))) au lieu de innerHTML. Aussi, pour XHTML compatibilité, vous voulez les utiliser li au lieu de LI dans votre createElement appel.

    OriginalL'auteur Joe D

  3. 2

    Essayer de réduire les actions sur les DOM autant que possible. Chaque appendChild sur unorderedList force le navigateur à nouveau le rendu de la page complète. Utilisation documentFragement pour ce genre d'action.

    var frag = document.createDocumentFragment();
for (var i = alphabet.length; i--; ) {
   var li = document.createElement("li");
   li.appendChild(document.createTextNode(alphabet[indexNum++]));
   frag.appendChild(li);
}
unorderedList.appendChild(frag);

    Donc il n'y aura qu'un seul DOM action où les forces d'un redessin complet au lieu de alphabet.length redessine

    Ce devrait être le numéro un. Je n'ai jamais vu ou entendu parler de cela avant.

    OriginalL'auteur Andreas