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

Sélectionner 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

Sélectionner 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

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe