La boucle for...in js : La boucle for... in peut exécuter des commandes à plusieurs reprises. La boucle for... in est couramment utilisée pour la manipulation d'objet.
La méthode html() sert pour définir ou récupérer le contenu (innerHTML) des éléments sélectionnés
La méthode html() définit ou retourne le contenu (innerHTML) des éléments sélectionnés.
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 :
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 : 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>
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 :
| 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 : 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>
La méthode .html() peut définir le contenu à l'aide d'une fonction pour les éléments sélectionnés.
Syntaxe :
| 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 : 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>