jQuery里.prepend()和.prependTo的方法使用。

姬姬姬姬姬姬

于 2021-11-20 11:45:18 发布

阅读量1.9k

点赞数 1

分类专栏： jQUery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_51491785/article/details/121436563

版权

jQUery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先我们来说.prepend()方法怎么使用

.prepend()

它是在某个选中元素的开头插入内容

比如说我们选中p元素，那么他就会在p元素开头师插入内容。

我们用代码来实现一下该方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.js"></script>

</head>
<body>
<h1>我是第一个h1</h1>
<p>第一个p</p>
<span>第一个span</span>
<p>第二个p</p>
<p>第三个p</p>
<button>点击在每一个p的开头插入内容</button>
<script>
    $(function (){
        $("button").click(function (){
            $("p").prepend("<b>我是要被插入的内容</b>")
        })
    })
</script>
</body>
</html>

在代码中可以看到我们不只是添加p元素；

我们还有h1和span标签在里面，这样效果会明显易懂。

结果如下图：

我们并没有着急的吧元素查到p前面，我们要把两张图片放在一起做对比才会明显对吧！

效果出来了：我们可以获得很多结论

1.选中什么就指挥在谁的前面插入内容

2.如果没呗选中就不会插入内容

3.在开头插入。

这个方法是可以使用函数的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.js"></script>

</head>
<body>
<h1>我是第一个h1</h1>
<p>第一个p</p>
<span>第一个span</span>
<p>第二个p</p>
<p>第三个p</p>
<button>点击在每一个p的开头插入内容</button>
<script>
    $(function (){
        $("button").click(function (){
            $("p").prepend(function (n){
                return "<b>这个 p 元素的 index 是：\" + n + </b>"
            })
        })
    })
</script>
</body>
</html>

我们可以获得到选中p的下标：

我觉得这个方法在某些得放还是挺管用的哦！

.prependTo

定义和用法

prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。

提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.js"></script>

</head>
<body>
<h1>我是第一个h1</h1>
<p>第一个p</p>
<span>第一个span</span>
<p>第二个p</p>
<p>第三个p</p>
<button>点击在每一个p的开头插入内容</button>
<script>
    $(function (){
        $("button").click(function (){
            $("<b>我是要被插入的内容</b>").prependTo($("p"))
        })
    })
</script>
</body>
</html>