DOM et Création d'un élément

création d'un élément

Maintenant que nous savons :

  • accéder à n'importe quel node ainsi qu'à ses attributs ;
  • modifier le contenu d'un node du type #text ;
  • accéder et modifier les attribut d'un node du type balise ;
  • modifer et/ou ajouter des propriétés CSS à un node du type balise ;

Il ne nous reste plus qu'à passer à la dernière étape, la création d'un élément.

Qu'est-ce qu'un élement en XML ?

Un élément est l'association d'une balise et de son contenu. Le contenu pouvant bien entendu être du texte, une autre balise ou du vide.

le modèle DOM de création d'élément

Le DOM a recours à 2 méthodes createTextNode et createElement. Mais attention autant vous prévenir dès à présent, lors de la création d'un nouvel élément, le DOM ne spécifie aucunement là où il doit se situer, en conclusion l'élément que nous allons créé ne sera pas visible dans le document....du moins pour l'instant.

createTextNode

Comme son nom anglais l'indique createTextNode est une méhode utilisée pour créer un nouveau node du type #text. Cette méthode est utilisée ainsi :

var newText = document.createTextNode("mon nouveau texte");

Différences entre createTextNode et nodeValue

  1. createTextNode ne peut être évoqué que par document et uniquement par lui.
  2. nodeValue ne peut que modifier un node du type #text, il ne peut pas le créer!!

createElement

createElement lui permet de créer un élément. Tout comme createTextNode il ne peut être évoqué que par document. comme un élément est composé d'au minimum une balise, createElement ne spécifie que le nom de cette balise selon l'écriture suivante :

var newTag = document.createElement("P");

cloneNode

A la différence des 2 méthodes présentées précédemment, cloneNode ne "crée" pas de nouveau noeud et peut être utilisée aussi bien par document que par le restant des noeuds d'un document. cloneNode permet la copie soit de la structure d'un élément, soit de la structure et du contenu d'un élément vers un autre élément. Cela permet la réalisation plus facile de noeuds complexes comme les listes ou les tableaux.

var newNode1 = templateNode.cloneNode(false);
// l'utilisation de false permet uniquement la copie 
// de la strucure de templateNode
var newNode2 = templateNode.cloneNode(true);
// l'utilisation de true permet la copie 
// de la strucure et de l'entiéreté du contenu de 
// templateNode

Conclusion transitoire

Avec les méthodes présentées, vous pourrez être tenté de créér un noeud voir même l'entiereté d'un document XHTML pour les plus ambitieux d'entre-vous, mais le seul problème est que tout ce que vous réaliserez, restera du domaine du l'invisible, du non palpable tout simplement parce que vous n'avez pas spécifié là où vous vouliez insérer vos noeuds créés. C'est ce que nous allons voir maintenant, en modifiant l'arbre de notre document.

Catérogies : Tutoriels