jQuery必会的增删改查Dom操作2(insertBefore、before、insertAfter 、after、appendTo 、append、prependTo 、prepend、...)

最新推荐文章于 2022-10-06 21:08:01 发布

&XYZ&

最新推荐文章于 2022-10-06 21:08:01 发布

阅读量236

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/104982422

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

insertBefore 和 before

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
        .wrapper {
            border: 1px solid black;
            width: 200px;
            padding: 10px;
        }

        .wrapper div {
            width: 200px;
            height: 100px;
        }

        .wrapper .box1 {
            background-color: #ff0000;
        }

        .wrapper .box2 {
            background-color: #0000ff;
        }

        .content {
            width: 200px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //insertBefore方法，将.content插入到.box1的前面
    $('.content').insertBefore('.box1');


    /*
        before方法，将.content插入到.box1的前面，
        注意：before()括号里面不能直接写css选择器了，
        需要你通过jq对象来选中。
    */
    $('.box1').before($('.content'));


    /*
        为什么jq要弄两个相同功能的方法？
            拿上面的两个来比较的话，其实是因为让你可以更好的链式操作：
        $('.content').insertBefore('.box1').css(),这样改变的是.content的样式；
        $('.box1').before( $('.content') ).css(),这样改变的是.box1的样式;
    */
</script>

</html>

insertAfter 和 after

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
        .wrapper {
            border: 1px solid black;
            width: 200px;
            padding: 10px;
        }

        .wrapper div {
            width: 200px;
            height: 100px;
        }

        .wrapper .box1 {
            background-color: #ff0000;
        }

        .wrapper .box2 {
            background-color: #0000ff;
        }

        .content {
            width: 200px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //insertAfter方法，将.content插入到.box1的后面
    $('.content').insertAfter('.box1');

    /*
        after方法，将.content插入到.box1的后面，
        注意：after()括号里面不能直接写css选择器了，
        需要你通过jq对象来选中。
    */
    $('.box1').after($('.content'));


    /*
        为什么jq要弄两个相同功能的方法？
            拿上面的两个来比较的话，其实是因为让你可以更好的链式操作：
        $('.content').insertAfter('.box1').css(),这样改变的是.content的样式；
        $('.box1').after( $('.content') ).css(),这样改变的是.box1的样式;
    */
</script>

</html>

appendTo 和 append

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
        .wrapper {
            border: 1px solid black;
            width: 200px;
            padding: 10px;
        }

        .wrapper div {
            width: 200px;
            height: 100px;
        }

        .wrapper .box1 {
            background-color: #ff0000;
        }

        .wrapper .box2 {
            background-color: #0000ff;
        }

        .content {
            width: 200px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //appendTo方法，将.content插入到.wrapper的里面默认插入到末尾
    $('.content').appendTo('.wrapper');

    /*
        append方法，将.content插入到.wrapper的里面默认插入到末尾，
        注意：append()括号里面不能直接写css选择器了，
        需要你通过jq对象来选中。
    */
    $('.wrapper').append($('.content'))


    /*
        为什么jq要弄两个相同功能的方法？
            拿上面的两个来比较的话，其实是因为让你可以更好的链式操作：
        $('.content').appendTo('.wrapper').css(),这样改变的是.content的样式；
        $('.wrapper').append( $('.content') ).css(),这样改变的是.wrapper的样式;
    */
</script>

</html>

prependTo 和 prepend

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
        .wrapper {
            border: 1px solid black;
            width: 200px;
            padding: 10px;
        }

        .wrapper div {
            width: 200px;
            height: 100px;
        }

        .wrapper .box1 {
            background-color: #ff0000;
        }

        .wrapper .box2 {
            background-color: #0000ff;
        }

        .content {
            width: 200px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //prependTo方法，将.content插入到.wrapper的里面默认插入到第一个
    $('.content').prependTo('.wrapper');

    /*
        prepend方法，将.content插入到.wrapper的里面默认插入到第一个，
        注意：prepend()括号里面不能直接写css选择器了，
        需要你通过jq对象来选中。
    */
    $('.wrapper').prepend($('.content'))


    /*
        为什么jq要弄两个相同功能的方法？
            拿上面的两个来比较的话，其实是因为让你可以更好的链式操作：
        $('.content').prependTo('.wrapper').css(),这样改变的是.content的样式；
        $('.wrapper').prepend( $('.content') ).css(),这样改变的是.wrapper的样式;
    */
</script>

</html>

remove 和 detach

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    $('div').click(function () {
        alert('0')
    })
    /*
        现在删除div，使用remove方法，会返回删除后的div对象。
        $('div').remove()
    */

    /*
        现在删除div，使用remove方法，然后再使用appendTo方法，
        这个时候，你会发现点击事件没有了。
    */
    //   $('div').remove().appendTo('body');

    /*
        现在删除div，使用detach方法，会返回删除后的div对象。
        $('div').detach();
    */

    /*
         现在删除div，使用detach方法，然后再使用appendTo方法，
         这个时候，你会发现点击事件依然在。
     */
    //   $('div').detach().appendTo('body');
</script>

</html>

$()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        在body里面插入一个div
    */
    //  写法一
    //  $('<div></div>').appendTo('body');
    //  写法二
    // $('<div/>').appendTo('body');

    /*
        在body里面插入一个div，并且给这个div添加内容，
        并且修改内容的文字颜色
    */
    //  $('<div style="color:#0000ff">我是新添加的div</div>').appendTo('body');
</script>

</html>