Modifier l'arbre d'un document

Afin de modifier c'est-à-dire d'ajouter et/ou de retirer des nodes de votre document courant, le DOM mets à notre disposition 3 méthodes complémentaires.

appendChild

Cette première méthode permet d'insérer un node dans un document XHTML mais pas n'importe où. Elle nécessite que vous indiquiez le node qui servira de parentNode au node que à insérer. L'insertion se fait de manière à ce que votre node devienne le lastChild de son nouveau parentNode.

newTag.appendChild(newText);
// je viens d'inserer newText dans le noeud newTag
   et maintenant newText et le lastChild de newTag

insertBefore

insertBefore permet d'insérer un node dans un document non plus à la fin des noeuds-enfants de son parentNode, mais avant l'un de ses noeuds-enfants, n'importe lequel.

En y réfléchissant on voit bien que insertBefore et appenChild se complète

var footer = document.getElementBytId("footer");
content.insertBefore(newTag,footer.firstChild);
// je viens d'assigner à footer un nouveau noeud -> newTag
   newTag devient le nouveau firstChild de footer
   puisque je l'insère avant l'actuel firstChild  

removeChild

Si l'on peut insérer un nouvelle élément, on peut enlever un noeud-enfant du document, en utilisant la méthode removeChild. il faut pour cela indiquer le parentNode du node que l'on veut enlever et le node à enlever.

footer.removeChild(footer.firstChild);
//j'enlève le premier noeud-enfant de footer

Maintenant que nous connaissons les principales techniques de manipulation d'un document XHTML avec le DOM nous pouvons étudier un exemple concret qui illustrera toutes les méthodes vue jusqu'à présent... la création d'une table XHTML