appendChild()
Ajoute un nœud nouvellement créé auparavant à la structure de nœuds existante, et cela de façon à ce qu'il soit inséré comme dernier nœud enfant d'un nœud à mentionner.
Exemple:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html><head><title>Test</title></head>
<body>
<ol id="Liste">
<li>Element</li>
</ol>
<script language="JavaScript" type="text/javascript">
<!--
document.getElementById("Liste").removeChild(document.getElementById("Liste").firstChild);
for(var i = 0; i < 10; i++) {
var nouveauLI = document.createElement("li");
var numeroli = i + 1;
var nouveautexteli = document.createTextNode("C'est l'élément de liste numéro " + numeroli);
document.getElementById("Liste").appendChild(nouveauLI);
document.getElementsByTagName("li")[i].appendChild(nouveautexteli);
}
//-->
</script>
</body></html> |
Explication:
L'exemple remplit automatiquement une liste numérotée avec des données. Tout de suite après la liste numérotée suit un passage JavaScript. Tout d'abord, l'élément de liste existant est supprimé avec la méthode vers le bas removeChild() . Ensuite est notée une Autre page d'information boucle for qui est parcourue 10 fois. À chaque tour de boucle, est créé dans un premier temps un nouvel élément du type li avec Autre page d'information document.createElement(). Ensuite une variable numeroli est fixée sur une valeur qui est supérieure de 1 au compteur de boucle i. Cette variable est utilisée dans l'instruction suivante, dans laquelle un nouveau nœud texte est créé avec Autre page d'information document.createTextNode(). Enfin suivent - toujours dans la boucle for - deux appels d' appendChild(). La première de ces instructions accède avec document.getElementById("Liste") à l'élément ol et fait en sorte qu'un nouvel élément enfant soit inséré à la fin. Est ajouté le nœud élément nouveauLI venant d'être créé et qui sauvegarde un nouvel élément li. La deuxième de ces instructions utilise le compteur de boucle i pour accéder avec document.getElementsByTagName("li")[i] à l'élément li venant d'être créé. À ce dernier est ajouté avec appendChild() le nœud texte créé auparavant comme élément enfant. De cette manière la liste se remplit à chaque tour de boucle d'un nouvel élément li y compris le contenu de caractères.
[AJAX] Mémoriser les valeurs d'un formulaire avant validation
Répondre avec citation
Envoyé par Baldy
Partager