Définit un champ générateur de paire de clés (pour les formulaires)
Définition et Usage la méthode prependTo()
La méthode .prependTo() insère le contenu spécifié au début des éléments sélectionnés (toujours à l'intérieur).
Note : Les méthodes prepend() et .prependTo() font la même chose. La différence est dans la syntaxe : le placement du contenu et de sélecteur et de qu'avec prepend() vous pouvez insérer du contenu à l'aide d'une fonction.
Syntaxe
$(contenu).prependTo(sélecteur)
Paramètre |
Description |
|---|---|
|
contenu |
Obligatoire. Spécifie le contenu à insérer (peut contenir des balises HTML) |
|
sélecteur |
Obligatoire. Spécifie quels éléments pour insérer le contenu |
Examiner le code HTML suivant :
<h2>Greetings</h2> <div class="container"> <div>Bonjour</div> <div>Au revoire</div> </div>
Nous pouvons créer du contenu et l'insérez dans plusieurs éléments à la fois :
$('<p>Test</p>').prependTo('div ');
Chaque élément interne <div> obtient ce nouveau contenu :
<h2>Ceci est un titre</h2> <div class="conteneur"> <div> <p>Test</p> Bonjour </div> <div> <p>Test</p> Au revoir </div> </div>
Nous pouvons également sélectionner un élément sur la page et l'insérez dans un autre :
$('h2').prependTo($('.container'));
Si un élément sélectionné de cette façon est inséré ailleurs, il est déplacé dans la cible ( pas clonée) :
<div class="container"> <h2>Greetings</h2> <div>Bonjour</div> <div>Au revoir</div> </div>
Exemple : Insérer le contenu au début de chaque élément de p :
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<b>Bonjour le
monde!</b> ").prependTo("p");
});
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Insérer le contenu à tous
les éléments p</button>
</body>
</html>
SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent
HTML5, CSS3, JavaScript
pour débutants Tome 1
Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.
Regarder aussi nos cours :
