jQuery实现在元素的不同位置插入元素（内部插入和外部插入）

在html页面中，我们可以使用 jquery 将新增的元素添加到指定元素的指定位置。这个位置可以在元素的内部和外部，而对于内外位置，又可以在元素的前面和后面。一、内部插入1.1 append()append()方法可以在目标元素内部的尾部插入元素，插入的元素作为最后一个子元素。举例如下：<!doctypehtml><html><head><titl

ztnhnr

12847人浏览 · 2020-07-05 19:53:26

ztnhnr · 2020-07-05 19:53:26 发布

在html页面中，我们可以使用 jquery 将新增的元素添加到指定元素的指定位置。这个位置可以在元素的内部和外部，而对于内外位置，又可以在元素的前面和后面。

一、内部插入

1.1 append()

append()方法可以在目标元素内部的尾部插入元素，插入的元素作为最后一个子元素。举例如下：

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li>第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素内部最后附加一个元素
    $(function () {
        $(".container").append('<li style="color:red">第三个元素</li>');
    })
</script>
</body>
</html>

运行效果如下（在ul内部的尾部添加了一个新的元素）：

1.2 appendTo()

appendTo()方法将匹配元素插入到目标元素内部的尾部。与append()方法操作相反。

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li>第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素内部最后附加一个元素
    $(function () {
        // $(".container").append('<li style="color:red">第三个元素</li>');

        $('<li style="color:red">第三个元素</li>').appendTo(".container");
    })
</script>
</body>
</html>

以上代码的运行效果和1.1相同。

1.3 prepend()

prepend()方法在目标元素内部的最前面插入指定的元素，并返回一个jQuery对象。指定的元素被插入到每个匹配元素里面的最前面，作为它的第一个子元素。

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li>第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素内部最前面插入一个元素
    $(function () {
        $(".container").prepend('<li style="color:red">第0个元素</li>');
    })
</script>
</body>
</html>

以上代码的运行效果：

1.4 prependTo()

prependTo()方法将指定元素插入到目标元素内部的最前面。与prepend()方法操作相反。

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li>第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素内部最前面插入一个元素
    $(function () {
        // $(".container").prepend('<li style="color:red">第0个元素</li>');
        $('<li style="color:red">第0个元素</li>').prependTo(".container");
    })
</script>
</body>
</html>

以上代码的运行效果和1.3相同。

二、外部插入

2.1 after()

after()方法在目标元素外部的后面插入指定元素。

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li class="first">第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素外部后面插入一个元素
    $(function () {
        $(".first").after('<li style="color:red">我是插入的元素</li>');
    })
</script>
</body>
</html>

以上代码的运行效果：

2.2 insertAfter()

insertAfter()方法将指定元素插入到目标元素外部的后面。与after()方法操作相反。

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li class="first">第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素外部后面插入一个元素
    $(function () {
        // $(".first").after('<li style="color:red">我是插入的元素</li>');
        $('<li style="color:red">我是插入的元素</li>').insertAfter(".first");
    })
</script>
</body>
</html>

以上代码的运行效果和2.1相同。

2.3 before()

before()方法在目标元素外部的前面插入指定元素。

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li class="first">第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素外部前面插入一个元素
    $(function () {
        $(".first").before('<li style="color:red">我是插入的元素</li>');
    })
</script>
</body>
</html>

以上代码的运行效果：

2.4 insertBefore()

insertBefore()方法将指定元素插入到目标元素外部的后面。与before()方法操作相反。

<!doctype html>
<html>
<head>
    <title>元素插入</title>
    <meta charset="utf-8">
    <script src="plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>元素插入</h2>
<ul class="container">
    <li class="first">第一个元素</li>
    <li>第二个元素</li>
</ul>
<script type="text/javascript">
    // 在目标元素外部前面插入一个元素
    $(function () {
        // $(".first").before('<li style="color:red">我是插入的元素</li>');
        $('<li style="color:red">我是插入的元素</li>').insertBefore(".first");
    })
</script>
</body>
</html>

以上代码的运行效果和2.3相同。

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

开源成为金融领域创新发展的新动力引擎