La méthode append() insèrer le contenu spécifié à la fin des éléments sélectionnés

Définition et usage méthode append

jQuery cours tutorial

La méthode append() insère le contenu spécifié à la fin des éléments sélectionnés(mais toujours à l'intérieur).

Astuce: Les méthodes append() et appendTo() font la même chose. La différence est dans la syntaxe: le placement des contenus et de sélection , et que appendTo() ne peut pas ajouter du contenu en utilisant une fonction.


Syntaxe

$(selecteur).append(contenu)


Paramètre

Description de

contenu

Requis. Spécifie le contenu, élément DOM, chaine HTML ou objet jQuery à insérer à la fin de chaque élément de l'ensemble des éléments sélectionnés

Note : La méthode .append() insère le contenu spécifié comme  dernier enfant de chaque élément sélectionné (pour l'insérer comme premier enfant, utilisez .prepend() ).

Exemple : ajouter une chaine HTML à tous les paragraphes.

Sélectionner 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(){
   $("p").append("<strong>Bien venues </strong>");
});
</script> </head>
<body>
  <p>Je voudrais vous dire: </p>
</body>
</html>

Ajouter contenu Utilisation d'une fonction

La méthode append() permet d'insérer le contenu spécifié à la fin de l'élément sélectionné en utilisant une fonction.

Syntaxe

$(selecteur).append(function(index,html))


function(index,html) Une fonction qui retourne une chaine HTML,   éléments DOM ou objet jQuery à insérer à la fin de chaque élément de l'ensemble des éléments sélectionnés. Reçoit la position d'index de l'élément

Paramètre

Description de

fonction (index, html)

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

    Index - facultatif. Reçoit la position d'index du sélecteur html - facultatif. Reçoit le code HTML actuelle du sélecteur

Exemple 1: ajoute chaine   à tous les paragraphes en utilisant une fonction.

Sélectionner 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(){
    $("p").append(document.createTextNode("Hello"));
});
</script> </head>
<body>
  <p>Je voudrais vous dire: </p> </body>
</html>

Exemple 2: ajoute chaine  HTML à tous les paragraphes en utilisant une fonction.

Sélectionner 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").append(function(index){
      return "<b>cet élément a un index " + index + "</b>";
    });
  });
});
</script>
</head> <body>
<h1>Ceci est le titre</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Ajouer</button>
</body>
</html>

 

Arguments supplémentaires

Similaire à d'autres méthodes d'ajout de contenu tels que par exemple : .prepend() , .before() , et after()
La méthode append() peut prendre aussi  plusieurs arguments comme entrée. Les entrées supportées peuvent être des éléments DOM, objets  jQuery, chaines HTML et tableaux d'éléments DOM.

Syntaxe

$(selecteur).append(contenu,[contenu2])


contenu2 : Arguments supplémentaires
Exemple :

Sélectionner 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(){
    $("p").append("bonjour","à vous","tous");
});
</script> </head>
<body>
  <p>Je voudrais vous dire: </p> </body>
</html>



Par gerywa 25 juillet 2014