JavaScript——三分钟带你了解appendChild和inserBefore的区别

本文链接：https://blog.csdn.net/nanchen_J/article/details/120722251

众所周知，这两种方法都是添加节点的操作，那么有什么区别呢？

appendChild方法：可以向节点的子节点列表的末尾添加新的子节点。

insertBefore方法：可在已有的字节点前中插入一个新的子节点。

appendChild的语法：node.appendChild(节点对象)

什么意思呢？appendchild方法是在子类的列表的末尾添加节点而insertBefore是在自己的前面添加新的节点

比如这里举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS中的appendChild和inserBefore的区别</title>
    <style>
        p {
            width: 100px;
            height: 30px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button>点击给盒子添加节点</button>
    <div id="div">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        window.onload = function () {        
            var btn = document.querySelector('button');
            var div = document.querySelector('#div');
            btn.addEventListener('click', function () {
                fn1();
            })
            function fn1() {
                var p4 = document.createElement('p');    //创建新的p节点
                p4.innerHTML = '我是新节点p';            //设置新节点的内容
                div.appendChild(p4);                     // 对新节点添加方法
            }
        }
        // 这个方法每次点击会出现在父元素中子元素的末尾
    </script>
</body>

</html>

实现的效果如下：

那么inserBefore呢？顾名思义，在已有的节点的前面添加节点，再看下面的例子：

insertBefore的语法：node.insertBefore(newnode,existingnode)

newnode：要插入的节点对象

existingnode:要添加新的节点前的子节点。

inserBefore里要填两个参数

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS中的appendChild和inserBefore的区别</title>
    <style>
        p {
            width: 100px;
            height: 30px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <button>点击给盒子添加节点</button>
    <div id="div">
        <p class="p1" id="p1">1</p>
        <p class="p1">2</p>
        <p class="p1">3</p>
    </div>
    <script>
        window.onload = function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                fn1();
            })
            function fn1() {
                var div = document.querySelector('#div');
                var p1 = document.querySelector('#p1')
                var ps = document.querySelectorAll('.p1');
                var p4 = document.createElement('p');
                p4.innerHTML = '我是新节点p';
                // div.insertBefore(p4,null);        // 和appendChild效果一样
                div.insertBefore(p4, p1)            //在创建的p节点的#p1的上方插入节点
            }
        }
    </script>
</body>
</html>

效果如下：