DOM内部插入四种方法

最新推荐文章于 2023-07-17 09:31:19 发布

八哥声动视界

最新推荐文章于 2023-07-17 09:31:19 发布

阅读量2.7k

点赞数 2

分类专栏：自我学习；

本文链接：https://blog.csdn.net/qq_36765367/article/details/79995275

版权

自我学习；专栏收录该内容

9 篇文章 1 订阅

订阅专栏

.append()向每个匹配的元素内部追加内容
.prepend()向每个匹配的元素内部前置内容
.appendTo()把所有匹配的元素追加到另一个指定元素的集合中
.prependTo()把所有匹配的元素前置到另一个指定的元素集合中

append()和appendTo()是在内部插入的内容后面插入-->插入尾部，prepend()与prependTo()是在内插入内容的前面插入-->插入首部。

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
    .aaron1{
        border: 1px solid red;
    }
    .aaron1 p {
        color: red;
    }
    .aaron2{
        border: 1px solid blue;
    }
    .aaron3{
        border: 1px solid yellow;
    }
    .aaron4{
        border: 1px solid green;
    }
    .aaron2 p {
        color: blue;
    }
    .aaron3 p {
        color: yellow;
    }
    .aaron4 p {
        color: green;
    }
    </style>
</head>

<body>
    <h2>通过prepend与prependTo添加元素</h2>
    <button id="bt1">点击通过jQuery的prepend添加元素</button>
    <button id="bt2">点击通过jQuery的prependTo添加元素</button>
    <button id="bt3">点击通过jQuery的append添加元素</button>
    <button id="bt4">点击通过jQuery的appendTo添加元素</button>
    <div class="aaron1">
        <p>测试prepend</p>
    </div>
    <div class="aaron2">
        <p>测试prependTo</p>
    </div>
    <div class="aaron3">
        <p>测试append</p>
    </div>
    <div class="aaron4">
        <p>测试appendTo</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div节点
        //然后通过prepend在内部的首位置添加一个新的p节点
        $('.aaron1').prepend('<p>prepend增加的p元素</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
    })
    </script>
    <script type="text/javascript">
    $("#bt3").on('click', function() {
        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('.aaron3').append('<p>append增加的p元素</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt4").on('click', function() {
        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('<p>append增加的p元素</p>').appendTo($('.aaron4'))
    })
    </script>
</body>

</html>

运行结果如下：