Salut,
On sait déjà faire pas mal de chose avec ce qu’on a vu dans l’article précédent, mais on va encore aller plus loin: on va créer un élément HTML en Javascript On va utiliser ce qu’on a vu dans l’article précédent pour créer un nouvel élément HTML.
Jusqu’à présent avec .innerHTML et .textContent on a pu modifier des éléments existants. On va donc utiliser une nouvelle méthode pour créer de nouveaux éléments à notre page directement en Javascript.
Ensuite une fois qu’on aura créé un nouvel élément, on verra comment l’insérer à la bonne place avec de nouvelles propriétés.
.createElement
La méthode .createElements va permettre de créer un élément HTML, comme un titre h1, une liste ul ou un li par exemple.
Je vais essayer de m’installer une routine pour toujours faire les choses de la même façon pour ce genre de chose assez mécanique:
- 1 – créer l’élément avec .createElement,
- 2- ajouter des classes ou un Id à ce nouvel élément avec les méthodes vues dans mon dernier article (Modifier les éléments du DOM),
- 3 – Saisir le texte à l’intérieur de la balise avec .textContent;
- 4 – Pousser l’élément au bon endroit dans la page, on verra cela plus loin dans cet article.
Rappel de l’exemple de l’article précédent (Modifier les éléments du DOM):
On prendra pour habitude afin d’avoir un code plus propre, de stocker les nouveaux éléments dans des variables:
Il faut bien noter qu’encore une fois la méthode .createElement s’applique à document puisqu’on veut ajouter un élément dans le body et pas ailleurs pour le moment.
On peut terminer d’ajouter le nouvel instrument dans notre liste:
Il existe une autre façon d’ajouter du contenu textuel, qui donnera donc exactement le même résultat, pour cela il faut utiliser la méthode .createTextNode, littéralement « créé un noeud text ». Ceci fait écho à mon premier article sur le DOM où on a pas mal parlé de noeuds (Javascript, les débuts dans le DOM). Cette méthode permet de faire le lien avec ce premier article puisqu’on va cette fois parler de noeuds textuels plutôt que de texte, ce qui est plus précis. Tu vas voir la syntaxe est un peu plus complexe mais rien d’insurmontable non plus à condition d’être un minimum rigoureux, puisque par rapport à l’exemple de code ci-dessus, on va regrouper des choses. Je vais donc reprendre exactement le même exemple mais avec cette fois ci .createtextNode.
A la ligne 5 tu peux voir comment cela fonctionne. Pour bien comprendre ça, il te faut revoir la composition de la structure du DOM(Javascript, les débuts dans le DOM). C’est un peu plus perturbant mais plus précis et avec un peu d’habitude, c’est pas si compliqué. Je préfère personnellement cette technique, je n’utilise quasiment pas textContent, mais ça c’est un choix te une petite habitude que j’ai prise. Cela permet d’insérer les balises exactement comme si je les codais en HTML.
Tu as surement remarqué une nouvelle propriété qui s’est glissée dans les exemples, .appendChild, et bien on voit ça en détails tout de suite!
Créer des éléments OK, mais je les mets où?
On peut choisir de manière assez précise grâce à plusieurs méthodes où insérer les éléments qu’on créé. On vient de croiser .appendChild(___); dans les exemples précédents, qui permet de pousser un élément à la fin de la liste des enfants d’un élément.
Mais il y en a d’autre:
- .appendChild: place l’élément à la fin de la liste des enfants;
- .insertBefore: insert l’élément avant un autre élément ayant le même parent.( un autre li dans une liste ul par exemple). Voici la syntaxe: .insertBefore(« A: élément à insérer« , « B: élément avant lequel insérer A« );
Un petit exemple pour utiliser insertBefore:
.insertAdjacentHTML
Cette méthode est encore plus précise que les précédentes, elle permet de positionner un élément très précisément par rapport à son parent.
Voici la syntaxe de cet méthode: .insertAdjacentHTML(« valeur« , « contenu à positionner« );
Voici les différentes valeurs:
- beforebegin: insère avant l’élément lui même, ne devient pas un enfant;
- afterbegin: insère à l’intérieur de l’élément, juste avant le premier enfant, et devient donc le premier;
- beforeend: insère à l’intérieur de l’élément , après son dernier enfant (un peu comme appendChild);
- afterend: insère après l’élément lui même, ne devient pas un enfant.
Je te conseille de bien tester toutes ces valeurs pour bien voir comment tout cela se positionne.
Remplacer ou supprimer un noeud
Ce qu’il faut bien voir quand tu lis le titre de ce dernier chapitre c’est que cela ne veut pas seulement dire supprimer une balise HTML. N’oublie pas qu’on a une nouvelle méthode pour ajouter du texte, .createTextNode, qui créé des noeud textuel, donc on va aussi pouvoir aussi remplacer du texte sans toucher à la balise.
Remplacer un noeud
Pour cela on va utiliser la méthode .replaceChild, qui prendra 2 paramètres:
- le nouveau noeud,
- le noeud qui est remplacé.
Attention à l’ordre, c’est très important:
.replaceChild(« nouveau noeud », « noeud qui est remplacé »);
Supprimer un noeud existant
Bon, on a vu que pour ajouter un élément il fallait taper un peu de code, et bien pour supprimer, c’est presque aussi simple que d’appuyer sur la touche suppr…j’ai dit presque…
Pour supprimer un élément, on va utiliser la méthode .removeChild, qui ne prendra qu’un seul paramètre, l’élément qu’on supprime. Dans notre exemple, on va supprimer la guitare. Attention, la balise li, guitare ne possède pas d’id donc il faut écrire un peu de code pour cibler précisément cet instrument:
Pour finir
Toutes les manipulations que l’on vient de voir tendent à ralentir les performances de la page si elles sont trop nombreuses. Elle force ne navigateur à prendre des éléments d’un coté et de l’autre pour monter une page. Il est donc préférable d’intervenir directement dans le HTML pour faire les grosses modifications.
J’ai terminé les exercices portant sur ce sujet de la formation OpenClassrooms, ils sont vraiment très bien. J’ai vraiment dû réfléchir par rapport à la structure du DOM. Une fois qu’on a compris le principe c’est pas si difficile.
C’est tout pour aujourd’hui,
A bientôt!
Guillaume
Laisser un commentaire