DEV {JS}

Mode sombre

Modifier les contenus textes ​

Il existe deux propriétés pour récupérer ou modifier le contenu d'un élément HTML :

  1. innerHTML : lecture ou modification au format HTML
  2. innerText : lecture ou modification au format texte brut

La méthode, insertAdjacentHTML() permet elle d'ajouter du HTML à différents emplacement d'un élément.

innerHTML ​

Récupère ou définit le contenu HTML d'un élément et de ses descendants.

html

  Je suis un <strong>joli</strong> paragraphe !


<script>
// Récupère le paragraphe #intro
const introPara = document.getElementById("intro");
// Récupère le contenu HTML du paragraphe
let contenu = introPara.innerHTML; //Je suis un <strong>joli</strong> paragraphe !

// Remplacer le contenu HTML du paragraphe
introPara.innerHTML = "Je suis un <em>nouveau</em> paragraphe !";
// Je suis un <em>nouveau</em> paragraphe !

// Ajouter du contenu HTML à la fin du contenu existant avec +=
introPara.innerHTML += ' <a href="http://kode.ch">Lien</a>';
// Je suis un <em>nouveau</em> paragraphe ! <a href="http://kode.ch">Lien</a>
</script>

innerText ​

Représente le contenu textuel, le rendu visuel d'un élément. Il fait donc abstraction des balises HTML.

Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.

html

  Je suis un <strong>joli</strong> paragraphe !


<script>
// Récupère le paragraphe #intro
const introPara = document.getElementById("intro");

// Récupération du contenu avec innerText
console.log(introPara.innerText); // Je suis un joli paragraphe !

// Récupération du contenu avec innerHTML
console.log(introPara.innerHTML); // Je suis un <strong>joli</strong> paragraphe !
</script>

insertAdjacentHTML(position, text); ​

Permet d'ajouter du text HTML à une position donnée autours ou à l'intérieur d'un element existant.

Il existe quatre positions:

  • 'beforebegin' : Avant l'element lui-même.
  • 'afterbegin' : Juste à l'intérieur de l'element , avant son premier enfant.
  • 'beforeend' : Juste à l'intérieur de l'element , après son dernier enfant.
  • 'afterend' : Après element lui-même.

Exemple de ces positions pour le paragraphe #intro

html
<h2>Mon titre</h2>
Un peu de texte
<!-- beforebegin -->

  <!-- afterbegin -->
  Et encore un peu de texte
  <!-- beforeend -->

<!-- afterend -->
Et encore et toujours du texte
<h3>Mon sous-titre</h3>

Exemple ​

html
<ul id="liste1">
  <li>élément de #liste1</li>
</ul>

<ul id="liste2">
  <li>élément de #liste2</li>
</ul>

<script>
// Ajouter un nouveau contenu entre #liste1 et #liste2
const liste2 = document.getElementById('liste2');

// Ajout de  juste avant et juste après #liste2
liste2.insertAdjacentHTML('beforebegin', 'Juste avant #liste2');
liste2.insertAdjacentHTML('afterend', 'Juste après #liste2');

// Ajout de <li> comme premier et dernier fils de la #liste2
liste2.insertAdjacentHTML('afterbegin', '<li>Nouveau premier fils de #liste2</li>');
liste2.insertAdjacentHTML('beforeend', '<li>Nouveau dernier fils de #liste2</li>');
</script>