Maison > interface Web > js tutoriel > Méthodes jQuery pour ajouter des éléments tels que append, prepend et before

Méthodes jQuery pour ajouter des éléments tels que append, prepend et before

巴扎黑
Libérer: 2017-06-24 11:16:48
original
1598 Les gens l'ont consulté

jQuery - Il existe de nombreuses façons d'ajouter des éléments tels que append, prepend, avantAttendez, laissez-moi vous donner une introduction détaillée ci-dessous

1.Méthode jQuery append()

Méthode jQuery append() à la fin de l'élément sélectionné Insérer du contenu.
Exemple

Le code est le suivant :

$("p").append("Un texte ajouté."); 🎜>


Méthode 2.jQuery prepend()
La méthode jQuery prepend() insère du contenu au début de l'élément sélectionné
Exemple

Le code est le suivant :

$("p").prepend("Un texte ajouté.");

3. ) méthodes La méthode jQuery after () insère le contenu après l'élément sélectionné. La méthode
jQuery before() insère le contenu avant l'élément sélectionné. L'exemple de code

est le suivant :

$("img. ").after("Un texte après");

$("img").before("Un texte avant");



L'éditeur ajoutera ci-dessous

append() insère du contenu à la fin de l'élément sélectionné. La méthode prepend() insère du contenu au début de l'élément sélectionné. element. La méthode

before() insère du contenu avant l'élément sélectionné

Code démo :

Rendu :

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<p class="testp">
  <ul>
    <li>第一个li标签</li>
  </ul>
</p>

<script>

  //append
  $(&#39;.testp ul&#39;).append(&#39;<li>append 插入的li</li>&#39;);
  //prepend
  $(&#39;.testp ul&#39;).prepend(&#39;<li>prepend 插入的li</li>&#39;);
  //after
  $(&#39;.testp ul&#39;).after(&#39;<li>after 插入的li</li>&#39;);
  //before
  $(&#39;.testp ul&#39;).before(&#39;<li>before 插入的li</li>&#39;);

</script>
Copier après la connexion
schéma de structure 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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal