Elemente mit jQuery verschieben

Elemente mit jQuery verschieben

  1. Verwenden Sie appendTo und prependTo, um Elemente mit jQuery zu verschieben
  2. Verwenden Sie insertBefore() und insertAfter(), 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 content ist der zu verschiebende Inhalt.
  • Das target ist 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:

jQuery appendTo

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:

jQuery voranstellen

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 content ist der zu verschiebende Inhalt.
  • Das target ist 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:

jQuery insertBefore

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:

jQuery insertAfter

Author: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

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

Verwandter Artikel - jQuery Element

  • Mit jQuery prüfen, ob ein Element vorhanden ist
  • Div-Element in jQuery ausblenden
  • Element nach ID in jQuery abrufen
  • Erstellen Sie Elemente in jQuery