oujood.com

jQuery La méthode .prependTo() insèrer un contenu au début d'un élément

Les méthodes prepend() et .prependTo() font la même chose. La différence est dans la syntaxe

search |

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>

 
Par gerywa 25 juillet 2014

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

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
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 :

Balise keygen

Définit un champ générateur de paire de clés (pour les formulaires)

Balise table

Définit une table

jQuery manipulation html

jQuery manipulation html



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci



hebergement web

Votre publicité ici

Nous contacter


© 2014 - 2022 , oujood.com