Faire le quiz

Insérer dans le document

#1 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. Tout d'abord créer un nœud pour l'élément avec la méthode document.createElement().
  2. Ensuite créer un nœud pour son contenu avec la méthode document.createTextNode().
  3. Puis "prendre" le nœud élément et lui accrocher son nœud contenu en utilisant la méthode appendChild().
  4. Enfin, "choisir" le nœud d'un élément HTML dans l'arbre où vous voulez accrocher ce qui constitue une nouvelle branche. Accrochez-la en utilisant la 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 parent. Il y existe d'autres méthodes pour insérer à d'autres positions, nous les verrons par la suite.

Tester le code

#2 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 avez une liste de ces objets ici à la lettre H de la liste alphabétique.

Exemple

Tester le code

#3 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 le nœud Text d'un nœud de type élément HTML.

Syntaxe

Text = document. createTextNode('contenuTextuel')

Paramètre

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

Valeur de retour

Un objet de constructeur Text()

Exemple

Tester le code

#4 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 wikipédia 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

#5 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

#6 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 (* regardez le code source).

#7 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 (* regardez le code source).

Politique de confidentialité

Mentions Légales