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

巴扎黑
巴扎黑original
2017-06-24 11:16:481599parcourir

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>
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!

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