Discussion :

[touit]

Bonjour,

Je me posai une question concernant Innerhtml, en ecrivant une fonction qui permette de mettre un tableau sous forme de liste <li> dans ma page html,
j'ai constater qu'en l'apellant a plusieurs reprises, les elements du tableau se mettaient les uns a la suite des autres dans cette liste.

En utilisant innerhtml et en declarant une variable liste qui est lie a mon id dans l'html, il n'y a pas ce probleme.

Je ne comprends pas ou la liste est efface par la fonction si je l apelle a plusieures reprises....

Et dans le cas ou je n'utilise pas innerhtml je ne comprends pas pourquoi cette meme liste est conservee cette fois ci ...

Je vous mets le code sans innerhtml (qui n'efface pas la liste d'un appel a un autre) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
tableau = ["Bob", "Julien", "Roger"];
 
 
function afficherListe() {
 
    elements = "";
 
    for (i = 0; i < tableau.length; i++) {
        elements += "<li>" + tableau[i] + "</li>";
    }
 
    document.write(elements);
}
 
 
afficherListe();

Et voici le code avec innerhtml:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$liste = document.getElementById("liste");
tableau = ["Bob", "Julien", "Roger"];
 
function afficherListe() {
    elements = "";
    for (i = 0; i < tableau.length; i++) {
        elements += "<li>" + tableau[i] + "</li>";
    }
    $liste.innerHTML = elements;
}
 
afficherListe();

[micetf]

Bonjour,

Avec document.write(), tu écris systématiquement ta liste elements et ce autant de fois que tu appelles ta fonction.
En revanche avec le innerHTML, tu remplaces par elements à chaque fois le html contenu dans ton bloc d'identifiant liste/

micetf

[NoSmoking]

Bonour,
je t'engage à lire ce billet écrit par Bovino
Comprendre document.write() en JavaScript.

Dans ton cas oublie purement et simplement cette méthode pour utiliser les méthodes du DOM, un peu plus évoluées qu'un simple innerHTML, même si cette propriété reste très utilisée et pratique.

[touit]

Merci a vous deux, je comprends mieux maintenant.