oujood.com

jQuery La méthode html() Définir|récupérer le contenu d'un élément

La méthode html() sert pour définir ou récupérer le contenu (innerHTML) des éléments sélectionnés

chercher |

Définition et Usage La méthode html()

jQuery cours tutorial

La méthode html() définit ou retourne le contenu (innerHTML) des éléments sélectionnés.

Retourner le contenu d'un élément

La méthode .html() peut être utilisée pour récupérer le contenu d'un élément. Lorsque la méthode .html() est utilisée pour retourner une valeur, elle retourne que le contenu du première élément.

Syntaxe :

$(sélecteur).html()

La méthode .html() n'est pas disponible pour les documents XML. Dans un document HTML, la méthode .html() peut être utilisé pour obtenir le contenu de n'importe quel élément. Si l'expression de sélecteur correspond à plus d'un élément, seul le contenu html du premier élément sera renvoyée. Considérez ce code :

$('div.demo-conteneur').html();

Pour récupérer le contenu du <div> il faudrait qu'il soit le premier <div> avec class="demo-conteneur" dans le document :

<div class="demo-conteneur">
<div class="demo">Démonstration Box</div>
</div>

Le résultat pourrait ressembler à ceci :

<div class="demo">Démonstration Box</div>

La méthode .html() utilise la propriété innerHTML du navigateur. Certains navigateurs peuvent ne pas renvoyer le texte HTML reproduisant exactement la source HTML dans un document original. Par exemple, Internet Explorer parfois ne donne pas les guillemets autour de valeurs d'attribut si elles contiennent uniquement des caractères alphanumériques.

Exemple : Récupérer le contenu d'un paragraphe

Exemple :       Copier le code


<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").html());
  });
});
</script>
</head>
<body>
<p>Ceci est un  paragraphe.</p>
<button>recupérer le contenu du paragraphe</button>
</body>
</html>

Définir le contenu HTML d'un élément

La méthode .html() peut être utilisée pour définir le contenu d'un élément.
Lorsque la méthode .html() est utilisée pour définir une valeur, il remplace le contenu de tous les éléments assortis.

Syntaxe :

$(sélecteur).html(contenu)

Paramètre Description
contenu Spécifie le nouveau contenu pour les éléments sélectionnés (peut contenir des balises HTML)

Lorsque la méthode .html() est utilisée pour définir le contenu d'un élément, tout contenu qui était dans cet élément est complètement remplacé par le nouveau contenu. Examiner le code HTML suivant :

<div class="conteneur">
<div class="demo">Démonstration </div>
</div>

Le contenu de <div class="conteneur"> peut être définie comme ceci :

$('div.conteneur').html('<p>Le nouveau contenu <em>Vous voyez!</em></p>');

Cette ligne de code remplacera tout à l'intérieur de <div class="conteneur"> :

<div class="conteneur">
<p>Le nouveau contenu <em>Vous voyez!</em></p>
</div>

Exemple : changer le contenu de tout les paragraphes

Exemple :       Copier le code

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").html("Bonjour <b>tout le mode!</b>");
  });
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Changer le contenu de tous les élément p </button>
</body>
</html>

Définir le contenu de l'élément l'aide d'une fonction

La méthode .html() peut définir le contenu à l'aide d'une fonction pour les éléments sélectionnés.

Syntaxe :

$(séleceuor).html(function(index,oldcontent))

Paramètre Description
function(index,oldcontent) Spécifie une fonction qui retourne le nouveau contenu pour les éléments sélectionnés. index - facultatif. Reçoit la position d'index du sélecteur oldcontent - facultatif. Reçoit le contenu actuel du sélecteur

Exemple : Changer le contenu d'un élément l'aide d'une fonction

Exemple :       Copier le code


<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").html(function(n){
    return "Cet élément p a l'index: " + n;
    });
  });
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Changer le contenu de tous les élément p </button>
</body>
</html>



Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

svg polygone

Dessin d’un polygone en SVG

fonction similar_text

Calcule la similarit de deux chaînes

fonction hebrev

Convertit un texte logique hébreux en texte visuel