English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Méthode html() de jQuery

jQuery HTML/Méthodes CSS

La méthode html() de jQuery récupère ou définit le contenu de l'élément sélectionné (innerHTML).

Utiliser la méthode html()ObtenirLorsque vous définissez le contenu, il le retourneraLe premier élément sélectionnéde contenu.

Utiliser la méthode html()DéfinirLorsque vous définissez le contenu, il le couvriraLe contenu de tous les éléments sélectionnés.

Attention :Lorsque vous utilisez html() pour définir le contenu d'un élément, tous les contenus de cet élément seront complètement remplacés par le nouveau contenu. De plus, avant de remplacer les éléments enfants par le nouveau contenu, jQuery supprime d'autres constructions des éléments enfants, telles que les données et les gestionnaires d'événements.

Utilisertext()La méthode ne récupère ou ne définit que le contenu texte de l'élément sélectionné.

Syntaxe :

Obtenir le contenu :

$(selector).html()

Définir le contenu :

$(selector).html(content)

Utiliser une fonction pour définir le contenu :

$(selector).html(function(index, currentContent))

Exemple

Cliquez sur le bouton pour obtenir le contenu du premier paragraphe :

$("button").click(function() {
  alert($("p").html());
});
Vérifiez et voyez‹/›

Cliquez sur chaque paragraphe pour obtenir le contenu HTML :

$("p").click(function() {
  alert($(this).html());
});
Vérifiez et voyez‹/›

Modifier le contenu de tous les paragraphes :

$("button").click(function() {
  $("p").html("Je veux dire: <b>Hello world</b>);
});
Vérifiez et voyez‹/›

Utiliser une fonction pour modifier le contenu d'un élément :

$("button").click(function() {
  $("p").html(function(i) {}}
    return "L'index de cet élément p: " + i;
  });
});
Vérifiez et voyez‹/›

Différence entre les méthodes html() et text() :

$("#btn1").click(function() {
  $("p").html("Je veux dire: <b>Hello world</b>);
});
$("#btn2").click(function() {
  $("p").text("Je veux dire: <b>Hello world</b>);
});
Vérifiez et voyez‹/›

Valeur du paramètre

ParamètresDescription
contentDéfinir le contenu HTML d'un élément sélectionné
Attention :Si ce paramètre est omis, html() retournera le contenu de la première élément sélectionné
function(index, currentContent)Spécifier une fonction qui retourne le contenu HTML à définir
  • index-Retourner la position de l'élément dans l'ensemble

  • currentContent-Retourner le contenu HTML actuel de l'élément sélectionné

jQuery HTML/Méthodes CSS