manipulation DOM

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.

Récupérer

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

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

Définir

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;

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

 innerText innerText InnerHTML

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

Récupérer

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>.

Définir

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.

innerHTML 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

afterbegin

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

 insertAdjacentText() insertAdjacentText() insertAdjacentHTML()

Similaire à insertAdjacentText, la fonction insertAdjacentHTML permet 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

afterend

insertAdjacentHTML() insertAdjacentHTML()