Comment utiliser jQuery pour modifier et lire le HTML d'un élément

Le HTML interne est un attribut utilisé pour accéder et modifier le contenu HTML d'un élément. Au cours des dernières années, jQuery est devenu l'un des outils les plus populaires pour implémenter des modèles internes dans JS. Dans cet article, nous verrons comment utiliser jQuery pour modifier et lire le code HTML d'un élément.

Syntaxe du modèle interne jQuery (Inner HTML)

Conceptuellement, le modèle interne (Inner HTML) implique le fonctionnement du DOM (Document Object Model). Il opère sur les éléments en modifiant le DOM. Voici la syntaxe de base de jQuery pour modifier du HTML :

$(selector).html(content)

Dans la syntaxe ci-dessus, le sélecteur pointe vers l'élément qui doit être modifié. Le contenu du HTML est représenté par la variable content. Le contenu peut être du simple texte ou du code HTML. Si le contenu transmis est une fonction, la valeur de retour de la fonction sera le contenu HTML.

Regardons l'utilisation du modèle interne de jQuery (Inner HTML) à travers quelques exemples.

Exemple 1 :

Dans l'exemple suivant, nous sélectionnons l'élément marqué "content" et définissons son nouveau contenu HTML sur "

Bienvenue sur mon site Web !

":

$ ("# content").html("

Bienvenue sur mon site Web !

");

Exemple 2 :

Dans l'exemple suivant, nous utilisons une fonction JavaScript pour calculer dynamiquement le contenu marqué comme contenu HTML content:

$("#content").html(function(){
return "La date d'aujourd'hui est : " + Date();
});

Lire le contenu de l'élément (HTML interne)

Sauf Définissez le contenu de l'élément ou vous pouvez utiliser jQuery pour lire le contenu de l'élément (HTML interne). Voici la syntaxe de base de jQuery pour lire le contenu HTML d'un élément :

$(selector).html()

Dans cette syntaxe, le sélecteur pointe vers l'élément qui doit être lu. La valeur de retour sera le contenu HTML de l'élément. Ensuite, regardons un exemple.

Exemple 3 :

Dans l'exemple suivant, nous parcourons tous les éléments de la liste marqués « list » et affichons le code HTML de chaque élément sur la console :

$("#list li").each(function( ){
console.log($(this).html());
});

Résumé

À travers cet article, nous avons appris à utiliser la balise HTML interne de jQuery pour lire et modifier le contenu HTML d'un élément. Nous avons également vu comment utiliser des fonctions pour calculer dynamiquement le contenu des éléments. Nous espérons que cet article vous a aidé à mieux comprendre les modèles internes de jQuery et à apprendre à les utiliser pour traiter le HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!