Elemente mit jQuery verschieben
-
Verwenden Sie
appendToundprependTo, um Elemente mit jQuery zu verschieben -
Verwenden Sie
insertBefore()undinsertAfter(), um Elemente mit jQuery zu verschieben
Dieses Tutorial zeigt, wie Sie Elemente in jQuery mit verschiedenen Methoden verschieben.
In jQuery gibt es verschiedene Methoden, mit denen Elemente an bestimmten Positionen in einem HTML-Dokument verschoben oder eingefügt werden können. Zu diesen Methoden gehören appendTo(), prependTo(), insertBefore(), insertAfter() und einige andere Methoden.
Lassen Sie uns die Methoden diskutieren und einige Beispiele zeigen.
Verwenden Sie appendTo und prependTo, um Elemente mit jQuery zu verschieben
Die Methoden appendTo() und prependTo() werden verwendet, um Elemente in jQuery in ein anderes Element zu verschieben.
Angenommen, ein div enthält drei Absätze, und wir möchten einen weiteren Absatz in das div verschieben. In diesem Fall verschiebt die Methode appendTo() die neuen Absätze in das div nach den drei Absätzen, und die Methode prependTo() verschiebt den Absatz in das div vor den drei Absätzen.
Die Syntax für beide Methoden ist unten dargestellt:
$("content").appendTo("target");
$("content").prependTo("target");
Wo:
- Der
contentist der zu verschiebende Inhalt. - Das
targetist die Position, an der das Element verschoben wird.
Versuchen wir ein Beispiel für die Methode 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>
Der obige Code verschiebt das ContentDiv nach den anderen Elementen im div in das TargetDiv. Siehe Ausgabe:
Lassen Sie uns nun das gleiche Beispiel für die Methode prependTo() implementieren. Siehe Beispiel:
<!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>
Der obige Code verschiebt das ContentDiv in das TargetDiv vor den anderen Elementen im div. Siehe Ausgabe:
Verwenden Sie insertBefore() und insertAfter(), um Elemente mit jQuery zu verschieben
Die Methoden insertBefore() und insertAfter() werden verwendet, um die Elemente vor und hinter andere Elemente zu verschieben. Die Syntax für diese Methoden ist unten dargestellt:
$("content").insertBefore("target");
$("content").insertAfter("target");
Wo:
- Der
contentist der zu verschiebende Inhalt. - Das
targetist die Position nach oder vor der der Inhalt verschoben wird.
Versuchen wir ein Beispiel für die Methode 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>
Der obige Code verschiebt das Inhaltselement vor das Zielelement. Siehe Ausgabe:
Versuchen wir nun das Beispiel für die Methode 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>
Der obige Code verschiebt den Inhalt hinter das Ziel. Siehe Ausgabe:
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