jQuery after( ) 方法

最新推荐文章于 2023-02-02 14:03:24 发布

「已注销」

最新推荐文章于 2023-02-02 14:03:24 发布

阅读量2k

点赞数

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

版权

通过jQuery的 after( ) 方法，我们可以在被选元素之后插入指定的内容。

语法格式：

$(selector).after(content,function(index))

参数：

content（必需）：插入的内容（可包含HTML元素）。

function（可选）：该函数可以返回待插入的内容，index为元素的索引号。

值得一提的是，我们可以使用常规方式插入内容，也可以使用函数在被选元素前插入内容。

示例：

（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(){
                $(".old").after("<div class = 'new'></div>");
            })
        })
    </script>
    <style>
        .old {
            width: 100px;
            height: 100px;
            margin-bottom: 5px;
            background-color: blue;
        }
        .new {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button>按钮</button>
    <div class="old"></div>
</body>
</html>

点击按钮，蓝色的DIV后悔插入一个新的DIV元素，如图：

（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(){
                $("div").after(function(index){
                    return "<p>我是第" + index + "个DIV，我的宽度为" + $(this).width() + "px</p>";
                })
            })
        })
    </script>
    <style>
        .one {
            width: 100px;
            height: 100px;
            margin-bottom: 5px;
            background-color: rgba(15, 155, 69, 0.459);
        }
        .two {
            width: 150px;
            height: 100px;
            margin-bottom: 5px;
            background-color: rgba(41, 15, 155, 0.459);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <button>按钮</button>
</body>
</html>