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):

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Instruments de musiques</title>
</head>

<body>
<h1>Les instruments utilisés en musiques actuelles</h1>
    <div>
        <ul id="instruments">
          	<li>Guitare</li>
            <li>Basse</li>
            <li id="batterie">Batterie</li>
        </ul>
    </div>
    <script>
//Ecrire ici le code JAvascript pour fair les tests
	</script>
</body>

</html>

On prendra pour habitude afin d’avoir un code plus propre, de stocker les nouveaux éléments dans des variables:

let piano = document.createElement("li"); // nous venons de créer un nouvel élément li
    // mais il n'est pas encore visible à l'écran, encore un peu de patience...

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:

let piano = document.createElement("li"); // nous venons de créer un nouvel élément li
piano.id = "surdoué"; // on assigne au nouvel élément piano l'ID "surdoué
piano.textContent = "Piano"; // on assigne le contenu textuel à lélément piano
document.getElementById("instruments").appendChild(piano); // on ajoute le nouvel élément piano dans la liste ayant pour Id instruments

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.

let piano = document.createElement("li"); // nous venons de créer un nouvel élément li
piano.id = "surdoué"; // on assigne au nouvel élément piano l'ID "surdoué
// Pour la suite il faut que tu te rappelles comment est faite l'arborescence du DOM
//un noeuds textuel est l'enfant d'un noeud d'élément HTML
piano.appendChild(document.createTextNode("Piano"));
// Explications:
// piano a été défini comme étant un li, donc un élément HTML, celui ci peut avoir des enfants textes.
//On pousse donc le texte (createtextNode) avec appendChild  dans la liste des enfants du li.
//Ensuite on pousse le li et le texte qu'il contient ainsi que l'id qu'on lui a ajouté dasn la liste ul =>
document.getElementById("instruments").appendChild(piano); // on ajoute le nouvel élément piano dans la liste ayant pour Id instruments

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:

    let contrebasse = document.createElement("li");
    contrebasse.id = "contrebasse";
    contrebasse.appendChild(document.createTextNode("Contrebasse"));
    document.getElementById("instruments").insertBefore(contrebasse, piano);

.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é”);

let percussion= document.createElement("li");
percussion.id = "percussion";
percussion.appendChild(document.createTextNode("Percussion"));
document.getElementById("instruments").replaceChild(percussion,batterie);

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:

        document.getElementById("instruments").removeChild(document.getElementsByTagName("li")[0]);

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