jQuery / Méthode / .html() - Lire ou remplacer le contenu des éléments

Dans jQuery, .html() sans argument lit la chaîne HTML intérieure du premier élément sélectionné. Une chaîne passée en argument remplace le contenu de tous les éléments sélectionnés, en conservant les éléments extérieurs. Pour afficher une saisie comme des caractères, utilisez .text() plutôt que de l'interpréter comme HTML avec .html().

Lecture, écriture, text et val

L'API .html() renvoie une chaîne en lecture et un objet jQuery en écriture. Le HTML intérieur est la représentation du modèle objet du document, DOM, produite par le navigateur : espaces et balises ne reproduisent pas forcément exactement le fichier source.

.text() n'analyse pas la chaîne comme des balises. Les valeurs actuelles d'input et textarea ne sont pas du HTML intérieur : utilisez .val(). Le getter .html() d'une sélection vide renvoie undefined. Vérifiez l'existence de la cible avant d'appeler une méthode de chaîne sur le résultat.

Exemple complet de remplacement HTML et de texte

Enregistrez tout le code en UTF-8 dans html-demo.html et ouvrez-le dans un navigateur. Internet permet de charger le fichier officiel jQuery 4.0.0 depuis le réseau de diffusion de contenu, CDN, sans installation de paquet. Lecture, remplacement, saisie, Reset et exemples Console ont été exécutés avec 3.7.1 et 4.0.0.

La première boîte contient Alpha dans strong, la seconde Beta dans em. Le rapport utilise aussi .text() : le HTML lu apparaît comme une chaîne au lieu d'y être interprété.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read and replace HTML contents</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, input { font: inherit; margin: 4px; max-width: 100%; }
    .box { border: 2px solid teal; padding: 16px; margin: 12px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>HTML markup versus plain text</h1>
  <button type="button" id="read">Read</button>
  <button type="button" id="replace">Replace with fixed HTML</button>
  <label>Message <input id="message" value="&lt;b&gt;Hello&lt;/b&gt;"></label>
  <button type="button" id="plain">Show message as text</button>
  <button type="button" id="reset">Reset</button>
  <div id="examples">
    <div class="box"><strong>Alpha</strong></div>
    <div class="box"><em>Beta</em></div>
  </div>
  <p>Delegated clicks: <span id="clicks">0</span></p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const $boxes = $(".box");
      const initial = $boxes.get().map(node => node.innerHTML);
      let clicks = 0;
      function report() {
        $("#result").text(`first html=${$boxes.html()}\ncombined text=${$boxes.text()}\nboxes=${$boxes.length}`);
      }
      $("#read").on("click", report);
      $("#replace").on("click", function () {
        $boxes.html('<button type="button" class="child">New</button>');
        report();
      });
      $("#plain").on("click", function () {
        $boxes.text($("#message").val());
        report();
      });
      $("#examples").on("click.htmlLesson", ".child", function () {
        clicks++;
        $("#clicks").text(clicks);
      });
      $("#reset").on("click", function () {
        $boxes.html(function (index) { return initial[index]; });
        $("#message").val("<b>Hello</b>");
        clicks = 0;
        $("#clicks").text(clicks);
        report();
      });
      report();
    });
  </script>
</body>
</html>

Initialement, le HTML vient seulement d'Alpha, le texte combine les deux :

first html=<strong>Alpha</strong>
combined text=AlphaBeta
boxes=2

1. Read relit l'état actuel. first html exclut le div extérieur.
2. Replace with fixed HTML remplace les deux contenus par des boutons New. Il reste deux boîtes et combined text vaut NewNew.
3. Chaque New augmente Delegated clicks. Remplacer encore ne produit qu'un incrément par clic.
4. Show message as text affiche <b>Hello</b>, balises visibles, dans les deux boîtes. Aucun élément b n'est créé.
5. Modifiez Message et recommencez : ce parcours lit avec .val() et transmet à .text().
6. Reset restaure le HTML conservé de chaque boîte, le message et zéro clic. Il ne réenregistre pas le gestionnaire délégué extérieur.

Ne pas insérer une saisie non fiable comme HTML

Les méthodes qui interprètent le HTML peuvent accepter des attributs exécutables ou des scripts, pas seulement des balises ordinaires. Une saisie non fiable transmise directement à .html() peut introduire du cross-site scripting, XSS. Le bouton de remplacement n'utilise qu'une chaîne fixe définie par le développeur ; Message est traité comme texte.

Une réponse serveur n'est pas automatiquement digne de confiance. Pour commentaires, recherches ou données externes à afficher en caractères, choisissez .text(). Si du HTML externe enrichi est nécessaire, définissez séparément les éléments/attributs autorisés et un assainissement éprouvé. Une substitution simple ou le retrait de quelques balises n'est pas une défense complète.

Événements et données des enfants remplacés

.html(newHtml) remplace tout le contenu, sans ajouter à la suite. Les anciens enfants ainsi que leurs données et gestionnaires directs jQuery sont nettoyés. Exécutez ce fragment complet dans la Console ; il crée un conteneur temporaire et le supprime à la fin.

const $host = $('<div><button class="child">Old</button></div>').appendTo("body");
const $old = $host.find("button");
let direct = 0;
let delegated = 0;
$old.data("token", "stored").on("click", () => direct++);
$host.on("click", ".child", () => delegated++);
$host.html('<button class="child">New</button>');
$host.find("button").trigger("click");
console.log(`direct=${direct} | delegated=${delegated}`);
console.log(`old attached=${document.contains($old[0])} | old data=${typeof $old.data("token")}`);
$host.remove();

direct=0 | delegated=1
old attached=false | old data=undefined

Le nouveau bouton n'a pas l'ancien gestionnaire direct : direct vaut zéro. Le parent reste et son gestionnaire délégué .on() traite le nouveau .child : delegated vaut un. Malgré la référence $old, l'ancien nœud n'est plus dans le document et token vaut undefined. Remplacer le parent lui-même ne préserverait pas son gestionnaire délégué.

Fonction pour un contenu propre à chaque élément

.html(function(index, oldHtml)) reçoit l'indice depuis zéro et l'ancien HTML, puis renvoie une nouvelle chaîne. Utilisez oldHtml pour l'ancien contenu dans le rappel. Cet exemple Console ajoute des spans numérotés au HTML A/B défini par le développeur.

const $boxes = $("<div><b>A</b></div><div><i>B</i></div>");
$boxes.html(function (index, oldHtml) {
  return oldHtml + "<span>" + (index + 1) + "</span>";
});
console.log($boxes.get().map(node => node.innerHTML).join(" | "));
console.log(`empty getter=${typeof $().html()}`);
$boxes.remove();

<b>A</b><span>1</span> | <i>B</i><span>2</span>
empty getter=undefined

oldHtml ne devient pas automatiquement sûr. Utilisez un contenu connu comme ici, sans ajouter de saisie externe au modèle. Si rien ne change, contrôlez portée de sélection, cible existante, structure intérieure voulue, chargement Network et erreurs Console. Si vous vouliez ajouter du contenu, vérifiez que remplacer tout l'intérieur avec .html() répond au besoin.