oujood.com

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

La méthode appendTo() 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 appendTo

La méthode appendTo() 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 append() peut ajouter du contenu en utilisant une fonction.

Syntaxe :

$(contenu).appendTo(selecteur)

Vous constatez que dans la syntaxe ci-dessus le contenu est placé avant la fonction alors que le sélecteur quand à lui il est mis dans le paramètre de la méthode appendTo().

Paramètre

Description

contenu

Requis. Spécifie le contenu à insérer à la fin des  éléments spécifiés par ee paramètre Selecteur  (peut contenir chaine HTML ou objet jQuery.)

Selecteur

Requis. Indique sur quels éléments on ajoute le contenu

  

Exemple 1:Ajouter HTML à un div

Exemple :       Copier le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
    $("div").css({
width:"100px"});
  $("button").click(function(){
   
$('<p>Test</p>').appendTo('.inner');
    $("p").css({ border:"2px
#ff0000 solid"});
  });
});
</script>
<style>.inner{ background:#ffff00; }
</style>
</head>
<body>
<center><h2>Ceci est le titre</h2>
<div class="container">
  <div class="inner">Hello</div>
  <br />
  <div class="inner">Goodbye</div>
</div>
<button>Ajouer</button>
</center>
</body>
</html>

Examiner le code HTML ci-dessus :

Nous pouvons créer du contenu et l'insérer dans plusieurs éléments à la fois :

Chaque élément interne <div> obtient ce nouveau contenu

Exemple 2 : ajouter un élément de la page à un autre

Exemple :       Copier le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
    $("div").css({
width:"100px"});
    $(".container").css({
border:"2px #000 solid"});
  $("button").click(function(){
   
$('h2').appendTo($('.container'));
    $("p").css({ border:"2px
#ff0000 solid"});
  });
});
</script>
<style>.inner{ background:#ffff00; }
</style>
</head>
<body>
<center><h2>Ceci est le titre</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>
<button>Ajouer</button>
</center>
</body>
</html>

Nous pouvons également sélectionner un élément sur la page et l'insérer dans un autre :

Si un élément sélectionné de cette façon et inséré ailleurs, il est déplacé vers la cible (et non pas clonée) comme dans le code ci-dessus .




Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

Cryptocurrency Qu'est ce qu'une cryptocurrency

Qu’est ce qu'une crypto-monnaie (cryptocurrency) ?

fonction strrev, strrev

Inverse une chaîne

Dessiner des arcs avec PHP GD

Dessiner des arcs avec PHP GD