使用 jQuery 移动元素

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

使用 jQuery 移动元素

作者：迹忆客最近更新：2023/03/13 浏览次数：

本教程演示了如何使用不同的方法在 jQuery 中移动元素。

jQuery 中有不同的方法可用于在 HTML 文档的特定位置移动或插入元素。这些方法包括 appendTo()、prependTo()、insertBefore()、insertAfter() 和其他一些方法。

让我们讨论这些方法并展示一些示例。

使用 `appendTo` 和 `prependTo` 使用 jQuery 移动元素

appendTo() 和 prependTo() 方法用于将元素移动到 jQuery 中的另一个元素中。

例如，假设一个 div 包含三个段落，我们想将一个段落移到 div 中。在这种情况下，appendTo() 方法会将新段落移动到三个段落之后的 div 中，而 prependTo() 方法会将段落移动到三个段落之前的 div。

这两种方法的语法如下所示：

$("content").appendTo("target");

$("content").prependTo("target");

其中，

content 是要移动的内容。
target 是元素将被移动的位置。

让我们尝试一下 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>

上面的代码会将 ContentDiv 移动到 div 中其他元素之后的 TargetDiv。见输出：

jQuery appendTo

现在，让我们为 prependTo() 方法实现相同的示例。参见示例：

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

上面的代码会将 ContentDiv 移动到 TargetDiv 在 div 中的其他元素之前。见输出：

jQuery prependTo

在 jQuery 中使用 `insertBefore()` 和 `insertAfter()` 移动元素

insertBefore() 和 insertAfter() 方法用于在其他元素之前和之后移动元素。这些方法的语法如下所示：

$("content").insertBefore("target");

$("content").insertAfter("target");

其中，

content 是要移动的内容。
target 是内容将被移动的位置之后或之前的位置。

让我们尝试一个 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>

上面的代码会将内容元素移动到目标元素之前。见输出：

jQuery insertBefore

现在，让我们试试 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>