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
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'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
