Trouve la longueur du premier segment d'une chaîne contenant tous les caractères d'un masque donnée
La méthode appendTo() insère le contenu spécifié à la fin des éléments sélectionnés (mais toujours à l'intérieur)
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 : 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 : 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 .