Mettre à jour innerHTML à l'aide de jQuery

Dans l’article d’aujourd’hui, nous allons apprendre à mettre à jour ou à remplacer le code HTML interne d’un élément dans jQuery.

Mettre à jour innerHTML à l’aide de jQuery

jQuery fournit la méthode .html() pour définir le contenu HTML de chaque élément dans l’ensemble des éléments correspondants.

Syntaxe:

.html(htmlString).html(function)

1. Le htmlString est une chaîne HTML définie comme contenu de chaque élément correspondant.
2. Il s’agit d’une function qui renvoie le contenu HTML à l’ensemble. L’ancienne valeur HTML et l’index de l’élément dans l’ensemble sont considérés comme des arguments.

Avant d’appeler la fonction, jQuery vide l’élément. Ensuite, il utilise l’ancien argument HTML pour consulter l’ancien contenu. this peut faire référence à l’élément actuel dans l’ensemble à l’intérieur de la fonction.

Lorsque .html() est utilisé pour définir le contenu d’un élément, tout contenu de cet élément est complètement remplacé par le nouveau contenu. De plus, jQuery supprime d’autres constructions telles que les informations et les gestionnaires d’événements des éléments enfants avant de remplacer ces éléments par un tout nouveau contenu.

La propriété innerHTML du navigateur est utilisée dans cette méthode.

Certains navigateurs peuvent ne pas générer un DOM qui réplique exactement la source HTML fournie. Utilisez la méthode .text() pour définir le contenu d’un élément script qui ne contient pas de HTML, plutôt que la méthode .html().

Comprenons-le avec l’exemple suivant.

Code HTML:

<div class="txt-container">Hello World! Welcome to the DelftStack.</div>
<button type="button">Change the text</button>

Code JavaScript :

$('button').click(() => {
  $('div.txt-container')
      .html('<p>Thank you for visiting <em>DelftStack!</em></p>');
})

Dans l’exemple ci-dessus, nous avons défini l’élément div, qui imprime le message Hello World! Welcome to the DelftStack. message. Lorsque vous cliquez sur le bouton Change the text, il mettra à jour le DOM avec la nouvelle balise de paragraphe.

Essayez d’exécuter l’extrait de code ci-dessus dans n’importe quel navigateur prenant en charge jQuery. Il va afficher le résultat suivant.

Sortie avant de modifier le texte :

Sortie après modification du texte :

Exécuter la démo