Boucle mettant un tableau sous forme de liste avec Innerhtml
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:
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:
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(); |
