Ajout de contenu

Ajouter des nouvelles balises par Javascript

Les appels Javascript

En javascript, on utilise des méthodes du DOM (Document Object Model) pour créer du nouveau contenu dans la page HTML.

Méthode	Description	Exemple
createElement()	Permet de créer une nouvelle balise. On inscrit le nom de balise entre parenthèses.	let paragraphe = document.createElement("p");
appendChild()	Permet d'ajouter un enfant à la fin du parent. S'appelle à partir du parent.	Après avoir créé la nouvelle balise: 1) Trouver le parent let parentMain = document.getElementById("id_main"); 2) Ajouter l'enfant parentMain.appendChild(paragraphe);
insertBefore()	Permet d'insérer un enfant juste avant un autre enfant existant sur la page. S'appelle à partir du parent.	Après avoir créé la nouvelle balise: 1) Trouver le parent let parentMain = document.getElementById("id_main"); 2) Trouver l'enfant de référence let divEnfant = document.getElementById("divEnfant"); 3) Ajouter le nmouvel enfant avant l'enfant de référence. parentMain.insertBefore(paragraphe, divEnfant);
removeChild()	Permet de retirer un enfant du parent. S'appelle à partir du parent.	1) Trouver l'enfant let enfant = document.getElementById("divInfo"); 2) Trouver le parent let parent = document.getElementById("id_main") 3) Retirer l'enfant parent.removeChild(enfant);

Une fois l'enfant créé, on désire le remplir d'information et le styler, sans quoi, ce sera une balise complètement vide que nous ajouterons à notre page.

Ajouter des attributs et des informations à la balise

1. Créer la nouvelle balise

   let nouveauSpan = document.createElement("span");

2. Ajouter ou modifier les attributs de balise

   Les attributs de balise tels que l'ID, le type, le href, etc, peuvent être ajoutés ou modifiés grâce aux méthodes suivantes :

   Méthode	Description	Exemple
   setAttribute()	Permet d'ajouter un attribut avec sa valeur. Si l'attribut existe déjà, alors la valeur est modifiée.	1) Créer la nouvelle balise OU aller chercher une balise existante 2) Ajouter ou modifier un attribut nouveauSpan.setAttribute("id","spanPopup");
   getAttribute()	Retourne la valeur d'un attribut. Si l'attribut n'exiet pas, retourne null ou une chaîne vide.	1) Trouver la balise voulue let bouton = document.getElementById("boutonAide"); 2) Extraire la valeur d'un attribut let typeBouton = bouton.getAttribute("type");
   removeAttribute()	Permet de supprimer un attribut d'une balise.	1) Trouver la balise voulue 2) Retirer l'attribut désiré bouton.removeAttribute("value");

3. Ajouter du texte

   nouveauSpan.innerText = "Nouvelle balise de contenu à afficher dynamiquement par Javascript.";

4. Ajouter ou modifier des classes (Bootstrap) à une balise

   Il existe différentes méthodes, récentes et plus anciennes, pour ajouter ou modifier les classes associées à une balise.

   1. Option la plus moderne : setAttribute()

      En utilisant la méthode setAttribute, on peut écrire la liste des classes tel qu'on le ferait en HTML :

      nouveauSpan.setAttribute("class", "fs-3 text-primary fw-bold");

   2. Option fréquemment utilisée : classList

      classList contient toute la liste des classes associées à un élément.

      Elle permet d'ajouter des classes avec add, retirer avec remove et remplacer avec replace.

      let div = document.createElement("div");
      
      // ajouter une classe container
      div.classList.add("container");
      //ajouter plusieurs autres classes
      div.classList.add("bg-dark","text-light","text-center");
      
      // retirer une classe
      div.classList.remove("text-center");
      
      // remplacer text-light par text-primary
      div.classList.replace("text-light","text-primary");
      
      // ajouter une classe si absente, sinon la retirer / basculer à l'état inverse 
      div.classList.toggle("bg-danger");
      

   3. Option plus ancienne, de moins en moins utilisée : className

      className contient une chaîne de caractères contenant toutes les classes associées à l'élément.

      Quand on modifier className, on modifier toute la chaîne de caractères.

      Certains éléments du HTML5 (les SVG entre autres) ne supportent pas className, c'est pourquoi il est préférable d'utiliser classList ou setAttribute.

      let txtAide = document.getElementById('texteAide');
      
      //attributsAide reçoit une chaîne de caractères contenant toutes les classe, exemple : "lead bg-primary fs-3 text-white px-5"
      let attributsAide = txtAide.className;
      
      //Si on associe une chaîne de caractères à className, on écrase alors l'ancienne chaîne
      txtAide.className = "bg-warning text-dark my-5";
      //Les classes d'avant ne sont plus appliquées, uniquement les trois insérées dans className          
      

Exemple

Supposons la page suivante :

Lorsque l'utilisateur appuie sur un des boutons "Plus d'info", on désire afficher un bloc d'information en lien avec la zone (Aide ou Rencontre).

Code HTML du main

Le code HTML du <main> ne contient que les cartes affichées par défaut sur la page :

<main id="id_main" class="container-lg">
    <div class="card-group ">
        <div class="card mx-1">
            <img src="img/group_help.jpg" alt="group help" class="card-img">
            <div
                class="card-img-overlay h-25 p-0 d-flex flex-column justify-content-center align-items-center mt-auto fond-titre-carte">
                <h2 class="card-titlep-3">Aide de groupe</h2>
                <button type="button" class="btn btn-primary" onclick="ajoutParagrapheAide()" id="btnAide">Plus
                    d'info</button>
            </div>
        </div>
        <div class="card mx-1">
            <img src="img/rencontre.jpg" alt="online meeting" class="card-img">
            <div
                class="card-img-overlay h-25 p-0 d-flex flex-column justify-content-center align-items-center mt-auto fond-titre-carte">
                <h2 class="card-title">
                    Rencontres en ligne
                </h2>
                <button type="button" class="btn btn-primary" onclick="ajoutParagrapheRencontres()">Plus
                    d'info</button>
            </div>
        </div>
    </div>
</main>

Une ou deux fonctions?

On remarque que chaque bouton appelle sa fonction d'ajout de contenu.

Note: il y aurait une façon plus optimale en utilisant une seule fonction, mais cet exemple est simplifié pour aider à la compréhension.

Code JS des fonctions

Le code de la fonction associée au bouton Plus d'info de la section Aide serait donc :

function ajoutParagrapheAide() {
    //aller chercher le parent
    let parentMain = document.getElementById("id_main");

    //Supprimer l'enfant s'il existe déjà
    let enfant = document.getElementById("pInfo");

    if(enfant != null)
    {
        parentMain.removeChild(enfant);
    }

    //créer un nouveau paragraphe
    let paragraphe = document.createElement("p");
    paragraphe.setAttribute("id","pInfo");

    //inscrire le texte du paragraphe et lui associer les classes Bootstrap
    paragraphe.innerText = "L'aide de groupe se base sur les études qui démontrent que l'apprentissage par les pairs est souvent plus efficace.";
    paragraphe.classList.add("alert", "alert-primary", "lead", "fs-3", "mt-5", "text-center");

    //Ajouter l'enfant à la fin du parent, à la suite de son contenu existant
    parentMain.appendChild(paragraphe);

}

Le code de la fonction de la section Rencontres serait quasi identique, sauf pour le texte du paragraphe et des classes Bootstrap si on veut modifier son apparence.