La création d'éléments dans le DOM - La méthode createElement - Javascript

Créer un nouvel élément avec createElement

Pour cette première façon de procéder, on va utiliser la méthode document.createElement qui permet, comme son nom l'indique, de créer un nouvel élément.

Mais comment on fait pour choisir le type d'élément à créer? Par exemple si je veux faire un div ou un p ce n'est pas pareil.

Il suffit pour cela de préciser le nom de la balise en paramètre de la méthode, comme ceci :



Hum, ok mais elle a du contenu là?

Pas encore, on a juste créer l'élément pour le moment, on peut modifier ses propriétés, par exemple pour ajouter du contenu textuels on peut modifier innerText



Ah je vois, mais pourquoi pas innerHTML? Je l'avais déjà utilisé auparavant mais j'ai du mal à comprendre la différence

innerHTML est prévu pour le cas où ta div va contenir d'autre balises, ici c'est juste un text, donc on préfères modifier innerText, en terme de bonne pratique c'est mieux de faire comme ça, mais si on modifiais innerHTML ça fonctionnerais aussi.

Ok et pour modifier la couleur?

On pourrait directement modifier le style :



Mais généralement on va éviter de modifier le style directement, sauf cas particulier ou on a besoin de préciser des valeurs calculés, on va généralement plutôt prévoir des classes et modifier les classes de l'élément pour qu'il s'affiche avec un style prédéfinit.

D'accord, et pour ça il y a une propriété class que l'on peut modifier j'imagine?

Effectivement il y a la propriété className, qui contiens précisément ce que l'attribut class HTML définit. On pourrait ici aussi modifier l'élément directement, mais on va éviter, car la moindre modification nécéssite de réécrire toutes les classes de l'élément, et si on veut par exemple en ajouter ou en retirer juste une, ce n'est pas pratique.

Ah j'imagine que tu as un moyen pratique de faire ça alors.

Tout à fait, il y a la propriété classList, qui elle est un tableau avec la liste de chaque classe de l'élément, et elle possède des méthodes que l'on va utiliser, particulièrement la méthode add pour ajouter une classe.


Et là l'élément apparait dans la page comme ça? Mais à quel endroit du coup?

Pas encore, là on l'as juste créer mais il n'est pas encore ajouté dans le DOM.

Intégrer cet élément dans le DOM

Il existe plusieurs méthode pour ajouter un élément dans le DOM, celle qu'on utilisera le plus souvent c'est appendChild, elle permet d'ajouter un élément enfant dans un élément sélectionné.

Donc si je comprend bien, on sélectionne un élément dans le DOM avec getElementById ou querySelector et on peut utiliser appendChild pour lui ajouter l'élément qu'on a créé?

C'est exactement ça, un petit exemple pour tester ça :



Ah oui l'élément s'affiche c'est génial ! Mais attend, s'il y a déjà quelque chose dans le body, ça va faire quoi? Le contenu va être supprimé et remplacer par l'élément?

Et bien non justement, la méthode appendChild ajoute l'élément au contenu déjà existant, sans y toucher, et le nouvel élément est toujours ajouté à la fin.

Et si je veux ajouter mon élément au début?

Dans ce cas, il y a une autre méthode, insertAdjacentElement, qui permet d'ajouter un élément en précisant la position avec :

• beforebegin : avant le début de la balise parent


• afterbegin : juste après le début de la balise parent, donc au début du contenu à l'intérieur


• beforeend : avant la fin de la balise parent, donc comme avec appendChild


• afterend : juste après la fin de la balise parent

Je pense que j'ai tout compris jusque là ! Et si dans mon div je veux mettre une autre balise je fais comment?

Des éléments imbriqués

C'est là que ça se complique un petit peu.

Je le sentais que ça n'allait pas être si simple que ça...

En fait techniquement, ce n'est pas plus compliqué que ça, il ne va rien y avoir de nouveau, par exemple si on veut mettre une balise p dans un div et ajouter le div au body on peut procéder comme ça :



Ah oui, on fait juste un appendChild du p dans le div, je ne vois pas pourquoi tu as dit que ça allait se compliquer.

Imaginons, on veuille ajouter des "card" au DOM, chaque card possède un titre, une image, une description et une date, rien de très compliqué?

Non ça me parait simple dit comme ça.

Voyons le code, avec du css et tout ce qui va bien.



Tout ça pour créer en Html :



Hum, je ne vois toujours rien de choquant en fait... Le code reste le même à chaque fois.

Ok, cette fois c'est toi qui va travailler, tu va me faire en javascript une card pour un profil utilisateur, elle doit contenir une zone pour la photo ainsi que le nom de l'utilisateur, mais aussi une autre zone dans laquelle tu mettras dans des éléments séparé avec titre à chaque fois :

• Le rôle de l'utilisateur


• Sa date d'inscription au site


• La liste de tous les commentaire qu'il a pu écrire sur le site, chacune dans une box qui contiendra un lien vers la page du commentaire, sa date de publication, le début du contenu, et un bouton pour répondre


• La liste de ses compétences avec à chaque fois une image et un texte

Arrête toi là! J'en ai pour 3 jours déjà à faire ça... Et ça va devenir n'importe quoi mon code je n'arriverais plus à m'y retrouver...

Là tu vois où je veux en venir quand je dit que ça peut rapidement se compliquer.

... Donc je n'ai pas à faire tout ça?

Non, c'était pour te faire réaliser que cette méthode, bien qu'efficace, peut rapidement devenir compliquée quand il y a trop d'éléments à créer. On va voir maintenant une autre méthode. J'ai terminé cette partie