oujood.com

La méthode after() pour insérer un contenu à un élément HTML

jQuery La méthode after() pour insérer un contenu dans un élément HTML. La méthode after() insère le contenu spécifiée après les éléments sélectionnés

chercher |

Définition et usage La méthode after()

La méthode after() insère le contenu spécifiée après les éléments sélectionnés.


Syntaxe:

(contenu1 [, contenu2])

Paramètre Description
Contenu1 Requis. Chaine HTML, élément DOM ou objet jQuery à insérer après chaque élément dans l'ensemble des éléments sélectionnés.
Contenu2 Un ou plusieurs éléments supplémentaires DOM, tableaux d'éléments, chaines HTML ou objets jQuery à insérer après chaque élément dans l'ensemble des éléments sélectionnés.

Exemple 1: insère HTML après tous les paragraphes.

Exemple :       Copier le code

  <!DOCTYPE html>
  <html lang="fr">
  <head>
  <meta charset="utf-8">
  <title>jQuery demo </title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  $("button").click(function(){
  $("p").after("<b>ceci est ajouter aprés ce paragraphe</b>");
  });
  });
  </script>
  </head>
  <body>
  <h1>Ceci est un titre</h1>
  <p>Ceci est un paragraphe.</p>
  <br />
  <button>Ajouter aprés l'élément p</button>
  </body>
  </html>

Insérer contenu à l'aide d'une fonction

En utilisant une fonction pour insérer le contenu spécifié après les éléments sélectionnés.

Syntaxe:

$(selecteur).after(function(index))


Paramètre

Description de

fonction (index) Requis. Indique une fonction qui renvoie le contenu à insérer.

  • Index - facultatif. Reçoit la position d'index du sélecteur

Exemple 2: Insérer un contenu à l'aide d'une fonction

Exemple :       Copier le code


  <!DOCTYPE html>
  <html lang="fr">
  <head>
  <meta charset="utf-8">
  <title>jQuery demo </title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  $("button").click(function(){
  $("p").after(function(n){
  return "<div>L'élément p ci dessus a un indexe " + n + "</div>";
  });
  });
  });
  </script>
  </head>
  <body>
  <h1>ceci est le titre</h1>
  <p>ceci est un paragraphe.</p>
  <p>ceci est un aytre paragraphe.</p>
  <button>Inserer le contenu chaque p</button>
  </body>
  </html>



Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

Utiliser l'extension XSL de PHP 5 pour effectuer des Transformations XSL

Utiliser l'extension XSL de PHP 5 pour effectuer des Transformations XSL

fonction strcasecmp

Comparaison insensible la casse de chaînes binaires

Balise option

Définit une option dans une liste déroulante