简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Questions et réponses frontales > le corps du texte

jquery ajouter du HTML

WBOY
Libérer： 2023-05-28 10:13:37
original
2869 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript concise qui permet de manipuler très simplement des documents HTML de manière plus pratique. Parmi eux, jQuery propose de nombreuses méthodes pour manipuler et modifier des éléments dans des documents HTML. Cet article explique comment ajouter du HTML dans jQuery selon le titre.

1. Qu'est-ce que l'ajout de HTML ?

HTML (Hyper Text Markup Language) est un langage utilisé pour décrire la structure des pages Web. Lorsque nous parcourons une page Web, tout ce que nous voyons est construit à partir de code HTML. Dans jQuery, nous pouvons modifier le contenu de la page Web en ajoutant ou en modifiant ces codes HTML.

L'ajout de HTML fait généralement référence à l'ajout de nouveaux éléments HTML ou de contenu HTML à l'intérieur ou à l'extérieur d'un élément HTML. Ces opérations peuvent être réalisées grâce à certaines méthodes dans jQuery. Dans le contenu suivant, nous montrerons quelques exemples d’utilisation de ces méthodes.

2. Ajouter du HTML à l'intérieur d'un élément

  1. méthode append()

La méthode append() de jQuery peut ajouter un ou plusieurs contenus à la fin d'un élément. Dans l'exemple suivant, nous utiliserons cette méthode pour ajouter un élément

Code HTML : 

<div id="container">
  <!--这里是一些内容-->
</div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Code jQuery : 

$("#container").append("<div>这是新增的元素</div>");
Copier après la connexion

Lorsque nous exécutons ce code, un nouvel élément

sera ajouté à l'intérieur de l'élément avec l'identifiant de "conteneur", avec le contenu de l'élément "Ceci est nouveau". ".

  1. Méthode prepend()

La méthode prepend() est similaire à la méthode append() La différence est qu'elle ajoute un nouveau contenu au début d'un élément. Dans l'exemple suivant, nous utiliserons cette méthode pour ajouter un nouvel élément

à l'intérieur d'un élément

Code HTML : 

<div id="container">
  <!--这里是一些内容-->
</div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Code jQuery : 

$("#container").prepend("<p>这是新增的段落</p>");
Copier après la connexion

De même, lorsque nous exécutons ce code, un nouvel élément

sera ajouté au début de l'élément avec l'identifiant de "conteneur", avec le contenu de " Ceci est un nouveau paragraphe. "

3. Ajouter du HTML en dehors d'un élément

  1. méthode after()

La méthode after() de jQuery peut ajouter un nouveau contenu après un élément. Dans l'exemple suivant, nous utiliserons cette méthode pour ajouter un élément

après un élément.

Code HTML : 

<div id="container">
  <!--这里是一些内容-->
</div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Code jQuery : 

$("#container").after("<div>这是新增的元素</div>");
Copier après la connexion

Lorsque nous exécutons ce code, un nouvel élément

sera ajouté après l'élément avec l'identifiant de "conteneur", avec le contenu de l'élément "Ceci est nouveau". ".

  1. méthode before()

la méthode before() est similaire à la méthode after(), la différence est qu'elle ajoute un nouveau contenu devant un élément. Dans l'exemple suivant, nous utiliserons cette méthode pour ajouter un élément

devant un élément.

Code HTML : 

<div id="container">
  <!--这里是一些内容-->
</div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

Code jQuery : 

$("#container").before("<p>这是新增的段落</p>");
Copier après la connexion

De même, lorsque nous exécutons ce code, un nouvel élément

sera ajouté devant l'élément avec l'identifiant "conteneur" avec le contenu "Ceci est nouveau". Paragraphes supplémentaires".

4. Résumé

Grâce à l'introduction de cet article, nous pouvons apprendre comment ajouter des éléments HTML ou du contenu HTML dans jQuery, et comment l'ajouter à l'intérieur ou à l'extérieur de l'élément. En développement réel, nous pouvons choisir différentes méthodes en fonction des besoins pour modifier le document 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!

source：php.cn
Article précédent：jquery impression incomplète Article suivant：données de demande post-synchrone jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1636
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1791
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1526
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1438
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1485
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！