Modification du DOM

3

Il arrive qu'il soit nécessaire d'insérer ou de modifier le contenu d'un élément dans une page ou plus précisément dans le DOM. Heureusement, JavaScript offre plusieurs fonctions permettant d'y arriver.

Afin de démontrer les différentes options, un élément avec la classe .element et le texte 1 sera utilisé dans l'ensemble des exemples suivants.

<div class="element">1</div>

InnerText

La fonction innerText permet de récupérer ou de définir le contenu texte d'un élément.

Par exemple, pour récupérer le contenu texte de l'élément .element, il est possible de faire:

console.log(element.innerText); // 1

Si une valeur lui est attribuée, le texte existant est remplacé.

Par exemple, dans le code ci-dessous 👇 le contenu texte 1 est remplacé par le chiffre 2;

Voir le CodePen de Simon Arnold (@smnarnold).

Si du code HTML était attribué comme nouvelle valeur via innerText, les balises afficheraient textuellement dans la page

Pour en savoir plus, voir cet article MDN🦖 sur innerText.

InnerHTML

Similaire à innerText, la fonction innerHTML permet de récupérer ou de définir le contenu HTML d'un élément.

Par exemple, pour récupérer le contenu HTML de .element, il est possible de faire:

console.log(element.innerHTML); // 1

Si une balise HTML avait été présente à l'intérieur de .element, par exemple une balise span enrobant le chiffre 1, la fonction retournerait plutôt <span>1</span>.

Si contenu HTML est attribué à innerHTML, le contenu HTML existant est remplacé par le nouveau.

Par exemple, dans le code ci-dessous 👇 le contenu texte 1 est remplacé par <em>2</em>, ce qui nous donne le chiffre 2 en italique.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN🦖 sur innerHTML.

insertAdjacentText

Contrairement à innerText, la fonction insertAdjacentText permet d'insérer un contenu texte à une position précise dans un élément, sans effacé le contenu original.

Soit:

  • beforebegin avant l'élément
  • afterbegin au début de l'élément
  • beforeend à la fin de l'élément
  • afterend après l'élément

beforebegin

Voir le CodePen de Simon Arnold (@smnarnold).

afterbegin

Voir le CodePen de Simon Arnold (@smnarnold).

Si du code HTML était attribué comme valeur via insertAdjacentText, les balises afficheraient textuellement dans la page.

Pour en savoir plus, voir cet article MDN🦖 sur insertAdjacentText().

insertAdjacentHTML

Similaire à insertAdjacentText, la fonction insertAdjacentHTMLpermet d'insérer un contenu HTML à une position précise dans un élément, sans effacé son contenu original.

Soit:

  • beforebegin avant l'élément
  • afterbegin au début de l'élément
  • beforeend à la fin de l'élément
  • afterend après l'élément

beforeend

Voir le CodePen de Simon Arnold (@smnarnold).

afterend

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN🦖 sur insertAdjacentHTML().

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme