oujood.com

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

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

chercher |

Définition et usage méthode append

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.

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(){
   $("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 de l'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.

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(){     $("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.

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").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 :

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



Par gerywa 25 juillet 2014

Voir aussi nos tutoriel :

text-indent

Spécifie l'indentation de la première ligne dans un bloc de texte

fonction number_format, number_format

Formate un nombre pour l'affichage

Elément XSLT XSL sort

Elément XSLT XSL sort