Insérer dans le document
#1
Comment insérer du contenu dans le document ?
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 :
- Tout d'abord créer un nœud pour l'élément avec la méthode
document.createElement(). - Ensuite créer un nœud pour son contenu avec la méthode
document.createTextNode(). - Puis "prendre" le nœud élément et lui accrocher son nœud contenu en utilisant la méthode
appendChild(). - 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.
#2
La méthode document.createElement()
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()
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()
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 :
- 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.
- 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()
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.
#6
TD : fonction qui insère une liste
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
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).
