Déplacer des éléments à l'aide de jQuery
-
Utilisez
appendToetprependTopour déplacer des éléments à l’aide de jQuery -
Utilisez
insertBefore()etinsertAfter()pour déplacer des éléments à l’aide de jQuery
Ce tutoriel montre comment déplacer des éléments dans jQuery en utilisant différentes méthodes.
Il existe différentes méthodes dans jQuery qui peuvent être utilisées pour déplacer ou insérer des éléments à des positions particulières dans un document HTML. Ces méthodes incluent appendTo(), prependTo(), insertBefore(), insertAfter() et quelques autres méthodes.
Discutons des méthodes et montrons quelques exemples.
Utilisez appendTo et prependTo pour déplacer des éléments à l’aide de jQuery
Les méthodes appendTo() et prependTo() sont utilisées pour déplacer des éléments dans un autre élément de jQuery.
Par exemple, supposons qu’un div contienne trois paragraphes et que nous voulions déplacer un paragraphe de plus dans le div. Dans ce cas, la méthode appendTo() déplacera les nouveaux paragraphes dans la div après les trois paragraphes, et la méthode prependTo() déplacera le paragraphe vers la div avant les trois paragraphes.
La syntaxe des deux méthodes est indiquée ci-dessous :
$("content").appendTo("target");
$("content").prependTo("target");
Où:
- Le
contentest le contenu à déplacer. - La
targetest la position où l’élément sera déplacé.
Essayons un exemple pour la méthode appendTo() :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery appendTo</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").appendTo("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
Le code ci-dessus déplacera le ContentDiv vers le TargetDiv après les autres éléments dans le div. Voir la sortie :
Maintenant, implémentons le même exemple pour la méthode prependTo(). Voir exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prependTo</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").prependTo("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
Le code ci-dessus déplacera le ContentDiv vers le TargetDiv avant les autres éléments du div. Voir la sortie :
Utilisez insertBefore() et insertAfter() pour déplacer des éléments à l’aide de jQuery
Les méthodes insertBefore() et insertAfter() permettent de déplacer les éléments avant et après d’autres éléments. La syntaxe de ces méthodes est indiquée ci-dessous :
$("content").insertBefore("target");
$("content").insertAfter("target");
Où:
- Le
contentest le contenu à déplacer. - La
targetest la position après ou avant où le contenu sera déplacé.
Essayons un exemple pour la méthode insertBefore() :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery insertBefore</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").insertBefore("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
</body>
</html>
Le code ci-dessus déplacera l’élément de contenu avant l’élément cible. Voir la sortie :
Essayons maintenant l’exemple de la méthode insertAfter() :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery insertAfter</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").insertAfter("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
Le code ci-dessus déplacera le contenu après la cible. Voir la sortie :
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook