Cours ⇒ Javascript et AJAX facebook twitter youtube

DOM et DHTML ⇒ & 5 Ajout d'éléments



5 Ajout d'éléments

 

list.appendChild(newNode);

Les nouveaux nœuds DOM sont créés à l'aide de la méthode document.createElement(). Elle génère un nouvel élément, en utilisant le nom de balise fourni en paramètre. Cet élément peut ensuite être inséré dans l'arborescence DOM. La méthode (node) utilisée le plus souvent est appendChild(). Elle ajoute un nouvel enfant à la fin de la liste.  Le code suivant ajoute un nouvel élément de liste vide

(<li>) à la fin de la liste dès que l'utilisateur clique sur le bouton :

 

<body>
<script language="JavaScript" type="text/JavaScript">
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
list.appendChild(newNode);
}
</script>
<ul id="list"><li>Produit </li></ul>
<input type="button" onclick="addItem();"value="Ajouter li" />
</body>

 

le nouvel élément est toujours ajouté à la fin de la liste des enfants , utilisez la méthode Before() qui permet d'insérer un nouveau nœud tout autre nœud (pour l'insérer n'importe où, sauf à la finde la liste). Comme pour les paramètres, vous donnez d'abord le nouveau nœud, puis le nouvel élément de même niveau.

Le code suivant insère un nouvel élémentde la liste chaque fois que l'utilisateur clique sur le bouton

<body>
<script language="JavaScript" type="text/JavaScript">
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
list.insertBefore(newNode, list.firstChild);
}
</script>
<ul id="list"><li>Produit</li></ul>
<input type="button" onclick=vaddItem();" value="ajouter" />
</body>

 


Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces