jQuery insertBefore( ) 方法

最新推荐文章于 2024-02-24 21:10:48 发布

「已注销」

最新推荐文章于 2024-02-24 21:10:48 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/m0_57835615/article/details/117857112

版权

通过jQuery的 insertBefore( ) 方法，我们可以在被选元素的前面插入 HTML 元素。

语法格式：

$(content).insertBefore(selector)

参数：

content：插入的内容（必须包含HTML标签）

selector：被选元素

注意：如果 content 是已存在的元素，它将被从原来的位置移除，并被插入在被选元素之前。

示例：

（1）插入新元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jQuery/jQuery.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("<p>盒子的宽度为" + $("div").css("width") + "盒子的高度为" + $("div").css("height") + "</p>").insertBefore($("div"));
            })
        })
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: rgba(12, 204, 115, 0.575);
        }
    </style>
</head>
<body>
    <button>按钮</button>
    <div></div>
</body>
</html>

击按钮，在盒子前面插入一个显示盒子的宽和高的p元素，如图：

（2）插入原先存在的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jQuery/jQuery.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").insertBefore($("div"));
            })
        })
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: rgba(12, 204, 115, 0.575);
        }
    </style>
</head>
<body>
    <button>按钮</button>
    <div></div>
    <p>我是一个段落。</p>
</body>
</html>

点击按钮，段落将被从原来的位置移除，并插入到盒子之前，如图：

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery insertBefore( ) 方法

通过jQuery的 insertBefore( ) 方法，我们可以在被选元素的前面插入 HTML 元素。语法格式：$(content).insertBefore(selector)
复制链接

扫一扫