DEVENIR-WEBMASTER.COM Log In
 20
open

Insérer dans le document

# Comment insérer du contenu dans le document ? open

Je vous conseille de revoir tout d'abord dans la documentation la spécification complète de l'objet Node ainsi que celle de l'objet document.

Il faut également se souvenir qu'un élément HTML est stocké dans un nœud et que son contenu est stocké dans un autre nœud qui est son enfant. Revoir le tuto sur le parcours de l'arbre si nécessaire.

Les 4 étapes pour insérer un élément HTML sont les suivantes :

  1. Créer un nœud pour l'élément HTML avec la méthode document.createElement()
  2. Créer un nœud pour le contenu de l'élément HTML avec la méthode document.createTextNode()
  3. "Prendre" le nœud de l'élément HTML et lui accrocher son nœud contenu en utilisant sa méthode appendChild().
  4. "Choisir" le nœud d'un élément HTML dans l'arbre où vous voulez accrocher ce qui constitue une nouvelle branche. Accrocher là en utilisant sa méthode appendChild().

Il faut bien comprendre que noeud.appendChild() ajoute un enfant au nœud sur lequel elle est appelée. L'enfant est ajouté systématiquement en tant que dernier né c'est à dire en dernière position du tableau childNodes du nœud. Il y existe d'autres méthodes pour insérer à d'autres positions, nous les verrons par la suite.

Tester le code

# La méthode document.createElement() open

Cette méthode crée un nœud de type élément HTML. Ce nœud est créé en mémoire "en dehors" de l'arbre du document. Ce nœud est créé vide de contenu.

Syntaxe

HTMLxxxxElement = document.createElement('tagName')

Paramètre

'tagName' est une chaîne de caractères qui contient le nom de l'élément par exemple 'h1' pour un titre ou 'p' pour un paragraphe.

Valeur de retour

HTMLxxxxElement est un objet DOM. Le xxxx de HTMLxxxxElement signifie que le constructeur de l'objet dépend de l'élément HTML. Chaque élément a son objet avec son propre constructeur. Si 'h1' est en paramètre d'appel alors l'objet de constructeur HTMLHeadingElement() est retourné. Si 'p' est en paramètre d'appel alors l'objet de constructeur HTMLParagraphElement() est retourné. Vous avec une liste de ces objets ici en 1.6.5. Object definitions.

Exemple

Tester le code

# La méthode document.createTextNode() open

Cette méthode crée un nœud de type Text. Lorsque le programmeur appelle cette méthode c'est pour créer un nœud qui contiendra le contenu textuel d'un autre nœud de type élément HTML

Syntaxe

Text = document.createTextNode('contenuTextuel')

Paramètre

'contenuTextuel' est la chaîne de caractère qui sera contenu dans le nœud créé.

Valeur de retour

Un objet de constructeur Text()

Exemple

Tester le code

# La méthode Node.appendChild() open

La méthode Node.appendChild() place un enfant dans la liste childNodes du nœud sur lequel elle est appelée.

Deux cas de figures se présentent :

  1. Le nœud n'est pas dans l'arbre et dans ce cas il s'agit d'une simple action d'ajout d'un enfant.
  2. Le nœud existe déjà dans l'arbre et dans ce cas il s'agit d'une action de déplacement d'un enfant.

Syntaxe

noeudEnfant = noeudParent.appendChild(noeudEnfant)

Paramètre

noeudEnfant est un objet du DOM.

Valeur de retour

L'objet noeudEnfant passé en paramètre d'appel.

Exemple

Un nœud élément pour un lien est créé. La valeur de l'attribut href est placée sur le site de wikipedia pour repérer l'élément.

On insère l'élément lien avec appendChild() et on vérifie (grâce au lien) que la valeur retournée est bien l'objet qui a été inséré.

Ensuite on vérifie qu'il a bien été inséré en tant que dernier fils.

Tester le code

# La méthode Node.insertBefore() open

Cette méthode nous permet d'insérer avant un nœud. Le nœud à insérer et le nœud devant lequel on va insérer sont passés en paramètre d'appel.

Syntaxe

noeudEnfant = noeudParent.insertBefore(noeudEnfant,noeudRepere)

Paramètre

objet noeudEnfant pour le nœud à insérer.

objet noeudRepere pour le nœud devant lequel on va insérer.

Valeur de retour

L'objet noeudEnfant passé en paramètre d'appel.

Tester le code

# TD : fonction qui insère une liste open

Il s'agit de fabriquer une fonction crerListe()qui prend en paramètre de déclaration un tableau listContent. Ce tableau contient le contenu textuel des éléments <li> d'une liste <ul>. La fonction doit retourner le sous-arbre d'objet DOM qui contient cette liste.

On accrochera ensuite ce sous arbre sur le nœud body du document HTML ci-dessous. La liste doit être placée avant l'élément script.

Vous avez ci-dessous le code HTML ainsi qu'une trame de code Javascript pour vous aider à démarrer.

Vous pouvez voir le résultat final ici.

# TD : fonction qui insère un tableau open

Il s'agit de fabriquer une fonction crerTable()qui prend en paramètre de déclaration un tableau de données de dimension 2 tabContent. Ce tableau contient le contenu textuel des cellules <td> d'un tableau HTML. La fonction doit retourner le sous-arbre d'objet DOM qui contient le tableau HTML.

On accrochera ensuite ce sous arbre sur le nœud body du document HTML ci-dessous. Le tableau HTML doit être placé avant l'élément script.

Vous avez ci-dessous le code HTML ainsi qu'une trame de code Javascript pour vous aider à démarrer.

Vous pouvez voir le résultat final ici.