Changer le texte d'une div à l'aide de Javascript

1. Modifier le texte div à l’aide de l’attribut innerHTML
2. Modifier le contenu d’un div avec l’attribut de nœud textContent
3. Aspect de sécurité HTML interne versus textcontent
4. Changer le texte div à l’aide du pseudo-élément :after

Les éléments div sont par nature non interactifs. Javascript lui donne vie en le rendant interactif. Il se peut que nous ayons besoin de reformuler le texte affiché par un div. Par exemple, lors de la mise en œuvre d’une fonctionnalité d’édition, nous pouvons réutiliser les écrans conçus pour développer la fonctionnalité d’ajout. Seuls les termes doivent être modifiés. En ce qui concerne la fonctionnalité Ajouter, nous pouvons avoir besoin de reformuler le mot-clé Ajouter d’un bouton en Mettre à jour et ainsi de suite. Voyons quelques façons dont nous pouvons changer le texte d’un div de manière dynamique.

Modifier le texte div à l’aide de l’attribut innerHTML

Contrairement à d’autres langages de programmation, nous n’utilisons pas de méthodes getter et setter pour définir un texte sur des éléments HTML. L’objet élément HTML d’un div a un attribut appelé innerHTML. Nous pouvons l’utiliser pour obtenir et définir le contenu de l’objet HTML. Ici, l’objet HTML sera en direct. C’est-à-dire qu’il reflète toute modification apportée à la propriété de l’élément dans le navigateur lors de l’actualisation.

Voici la syntaxe pour l’utilisation de innerHTML.

var text = htmlElement.innerHTML;
htmlElement.innerHTML = 'New Text';

Dans l’extrait de code ci-dessus, nous obtenons le contenu d’un élément HTML div en utilisant le htmlElement.innerHTML. Ici, le htmlElement est l’objet HTML réel. De même, nous pouvons définir le contenu sur un div en utilisant le même attribut, le innerHTML de l’élément. Nous attribuons simplement le contenu du texte au innerHTML.

• Utilisation :

<div id="div-element">Hey there!!</div>

window.onload = function() {
  document.getElementById('div-element').innerHTML = 'Hello World!!';
  console.log(document.getElementById('div-element').innerHTML);
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!';
  console.log(document.getElementById('div-element').innerHTML);
}

Production :

Hello World!!
Hello bunny!!

Avant d’appliquer le .innerHTML, nous devons sélectionner l’élément HTML. Nous pouvons le faire de diverses manières. Javascript a de nombreuses fonctions que nous pouvons utiliser pour rechercher des éléments du DOM. Voici quelques-unes des méthodes les plus couramment utilisées.

• getElementById() : Cette fonction de l’interface document permet de sélectionner un élément du DOM à l’aide de son id, précisé dans le HTML. La fonction renvoie l’objet HTML correspondant à l’élément sélectionné.
• getElementsByClassName : nous pouvons rechercher un élément basé sur le nom de classe css avec la fonction getElementsByClassName. Plusieurs éléments sont renvoyés sous forme de tableau d’objets HTML par cette méthode javascript.
• getElementsByName : Il existe une autre façon de sélectionner les éléments avec l’attribut name. Nous spécifions l’attribut name pour le nœud en HTML. Cette méthode renvoie un tableau d’objets HTML. Nous pouvons l’utiliser, surtout si nous souhaitons sélectionner plusieurs éléments avec un style spécifique, une classe CSS et agir sur eux tous en une seule fois.
• getElementsByTagName : Nous pouvons également sélectionner des éléments en fonction de leurs balises HTML en utilisant la fonction getElementsByTagName. Par exemple, nous pouvons effectuer des opérations sur tous les éléments div dans une section de DOM etc. Comme son nom l’indique, la fonction renvoie un tableau d’objets HTML.
• querySelector : la fonction Javascript querySelector est un peu plus générique et peut être utilisée pour sélectionner des éléments HTML avec la requête css. La fonction retourne le premier élément qui satisfait la condition passée dans son paramètre.
• querySelectorAll : celui-ci est similaire au querySelector, à la seule différence qu’il renverra plus d’un élément satisfaisant au format css query passé en paramètre.

Modifier le contenu d’un div avec l’attribut de nœud textContent

Même si nous utilisons assez souvent le innerHTML, il existe un risque de sécurité lié à son utilisation. Elle est liée à la façon dont le innerHTML remplace le contenu de l’élément HTML. L’attribut innerHTML supprime tous les sous-nœuds HTML d’un seul coup et ajoute le nouveau contenu qui y est attribué.

Le risque de sécurité vient du fait que l’attribut innerHTML nous permet d’insérer n’importe quel morceau de code HTML, même s’il s’agit d’un code dangereux. Nous discuterons de cet aspect dans la section suivante. MDN recommande d’utiliser node.textContent pour modifier le texte d’un élément. Il remplace les nœuds enfants à l’intérieur du HTML par le texte que nous affectons dans le paramètre textContent. Référez-vous au code suivant pour comprendre l’utilisation.

<div id="div-element">Hey there!!</div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!'
}

Production :

Hello bunny!!

Ici, nous sélectionnons l’élément HTML, div, avant de modifier le texte. Nous utilisons la fonction getElementById() pour interroger l’élément du DOM. On utilise ensuite le textContent pour changer le texte du div. Ce changement ne sera pas distingué lors du chargement de l’écran. Dès que le navigateur charge la page Web, la fonction window.onload est exécutée et le changement de texte se produit. Ainsi, l’utilisateur final voit toujours le texte le plus récent. Le changement de l’ancien texte en nouveau n’est pas évident au chargement de l’écran. Nous pouvons également jouer avec le textContent à l’intérieur de la méthode setTimeOut pour voir le changement.

Aspect de sécurité HTML interne versus textcontent

L’attribut innerHTML diffère du textContent. Les deux attributs prennent texte en entrée, mais quelle est la faille de sécurité ici ? Dans le innerHTML, il est possible d’ajouter du code malveillant. Reportez-vous à l’extrait de code suivant. Ici, le changement se reflète et le code innerHTML sera exécuté. Comme le montre l’extrait de code suivant, en cliquant sur l’élément HTML div vert clair, une alerte indésirable apparaît à l’écran.

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.innerHTML =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

Si nous attribuons le même contenu dans textContent pour l’élément div, il ne le rendra pas comme un élément HTML. Javascript rend le contenu sous forme de texte à l’écran. Ainsi, nous pouvons littéralement voir le <div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')"> affiché sous forme de texte dans la page Web. Cet aspect rend le code plus sécurisé et fiable. Par conséquent, si nous avons l’intention de modifier le texte d’un élément HTML, les meilleures pratiques Javascript (telles que prises en charge par MDN) recommandent d’utiliser textContent au lieu de innerHTML attribut.

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

Changer le texte div à l’aide du pseudo-élément :after

Si le changement de texte est trivial, nous pouvons utiliser CSS pour modifier le texte div. On utilise le pseudo élément HTML :after, dans lequel on ajoute le texte que l’on souhaite afficher dans l’attribut content. Cela ne s’applique pas aux éléments HTML comme <img> où le navigateur remplace le contenu par l’image chargée. Le code suivant détaille l’utilisation.

<div class="pvw-title"><span>Facts</span></div>

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}