Maison  >  Article  >  interface Web  >  jquery ajouter du HTML

jquery ajouter du HTML

WBOY
WBOYoriginal
2023-05-28 10:13:372842parcourir

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 dc6dce4a544fdca2df29d5ac0ea9906b

Code HTML :

<div id="container">
  <!--这里是一些内容-->
</div>

Code jQuery :

$("#container").append("<div>这是新增的元素</div>");

Lorsque nous exécutons ce code, un nouvel élément dc6dce4a544fdca2df29d5ac0ea9906b 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 e388a4556c0f65e1904146cc1a846bee à l'intérieur d'un élément dc6dce4a544fdca2df29d5ac0ea9906b

Code HTML :

<div id="container">
  <!--这里是一些内容-->
</div>

Code jQuery :

$("#container").prepend("<p>这是新增的段落</p>");

De même, lorsque nous exécutons ce code, un nouvel élément e388a4556c0f65e1904146cc1a846bee 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 dc6dce4a544fdca2df29d5ac0ea9906b après un élément.

Code HTML :

<div id="container">
  <!--这里是一些内容-->
</div>

Code jQuery :

$("#container").after("<div>这是新增的元素</div>");

Lorsque nous exécutons ce code, un nouvel élément dc6dce4a544fdca2df29d5ac0ea9906b 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 e388a4556c0f65e1904146cc1a846bee devant un élément.

Code HTML :

<div id="container">
  <!--这里是一些内容-->
</div>

Code jQuery :

$("#container").before("<p>这是新增的段落</p>");

De même, lorsque nous exécutons ce code, un nouvel élément e388a4556c0f65e1904146cc1a846bee 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!

Déclaration:
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
Article précédent:jquery impression incomplèteArticle suivant:jquery impression incomplète