Ajout de contenu

Ajouter des nouvelles balises par Javascript

Ajouter des attributs et des informations à la balise

1. Créer la nouvelle balise

   let nouvelleImage = document.createElement("img");

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 :

   • Soit en y accédant directement

     `document.getElementById("imageProduit").src = "img/produit.png";

     Ceci est une ancienne méthode, toujours supportée.

   • Soit en utilisant les fonctions d'accès prévues pour cela (méthode récente, plus stable à travers les navigateurs récents).

     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 ou locale) à 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");
      

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>

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");

    //Trouver le paragraphe dans la page et si on ne le trouve pas (null), alors on peut le créer
    let enfant = document.getElementById("pInfo");

    if(enfant == null)
    {  
        //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.