Supprime les espaces (ou d'autres caractères) de fin de chaîne
La méthode before() insère le contenu spécifié avant les éléments sélectionnés
La méthode before() insère le contenu spécifié avant les éléments sélectionnés.
Syntaxe
$(sélecteur).before(contenu [, contenu2])
|
Paramètre |
Description |
|---|---|
|
contenu |
Obligatoire. Spécifie le contenu à insérer (peut contenir : Chaine HTML, élément DOM ou objet jQuery à insérer avant chaque élément dans l'ensemble des éléments sélectionnés) |
|
Contenu2 |
Un ou plusieurs éléments supplémentaires (peut contenir : Chaine HTML, élément DOM ou objet jQuery à insérer avant chaque élément dans l'ensemble des éléments sélectionnés). |
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").before("<p><b>Ceci est le paragraphe
ajouté!</b></p>");
});
});
</script>
</head>
<body>
<p>Ceci est le paragraphe existant.</p>
<button>Ajouter</button>
</body>
</html>
La méthode before() permet aussi d'insérer le contenu spécifié avant les éléments sélectionnés à l'aide d'une fonction.
une fonction qui retourne une chaine HTML, ou des éléments DOM ou objet jQuery à insérer avant chaque élément dans l'ensemble des éléments séléctionnés. Reçoit la position l'index de l'élément dans le jeu comme un argument.
Syntaxe
$(sélecteur).before(function(index))
|
Paramètre |
Description |
|---|---|
|
function(index) |
Obligatoire. Spécifie une fonction qui retourne le contenu à insérer. index - facultatif. Reçoit la position d'index du sélecteur |
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(){
$("button").click(function(){
$("p").before(function(n){
return "<div>L'élément p qui suit a
index " + n + "</div>";
});
});
});
</script>
</head><body>
<h1>Ceci est le titre</h1>
<p>Ceci est un paragraphe.</p>
<p>Et ceci est un autre paragraphe.</p>
<button>Ajouter</button>
</body>
</html>
Vous pouvez également sélectionner un élément sur la page et l'insérer avant un autre.
Si un élément sélectionné de cette façon est inséré ailleurs, elle sera déplacée avant la cible (et non cloné) :
Exemple 1:
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(){
$("button").click(function(){
$("p").before( $("b")
);
});
});
</script>
<style>p { background:yellow;
width:200px}</style>
</head>
<body>
<center>
<p> Ceci est un
paragraphe</p><b>Ceci est
l'élément qui sera
déplacé</b>
<br />
<button>Ajouter</button>
</center>
</body>
</html>
Exemple 2 :
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(){
$("button").click(function(){
$('.container').before($('h2'));
});
});
</script>
<style> .container{ background:yellow; width:200px}
div {border:1px solid
#f00;width:150px;padding:5px;}
h2 {border:1px solid #00f;width:100px;}
</style>
</head>
<body>
<center>
<div class="container">
<h2>Ceci est le titre</h2>
<p>Teste</p>
<div class="inner">Hello</div>
<p>Teste</p>
<div class="inner">Goodbye</div>
</div>
<button>Ajouter</button>
</center>
</body>
</html>
Par gerywa 25 juillet 2014