insertBefore的用法

真实项目中，我们偶尔会在JS中动态创建一些DOM/HTML标签，然后把其增加到页面中，有以下用法

appendChild

容器.appendChild（新元素）
把当前创建的新元素添加到容器的末尾位置

=>添加到页面中
//document.body.appendChild(oDiv);

下面我们主要来探究insertBefore的用法

insertBefore

容器.insertBefore（新元素、老元素）

1、在当前容器中，把新创建的元素增加到老元素之前，第一个元素是创建的变量名，第二个元素是盒子的id名或是之前创建的变量名。
以下是html和css代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="1-import.css">
</head>
<body>
<div class="boxa" id="box1">1</div>
<div class="boxb" id="box2">2</div>
</body>
</html>

首先我们创建一个oDiv盒子，把它放在id= box2的盒子的前面

<script>
    var oDiv = document.createElement('div');
    oDiv.className = "ggb";
    document.body.insertBefore(oDiv,box2);
    //var aDiv = document.createElement('div');
    //aDiv.className = "agb";
    //document.body.insertBefore(agb,box2);
</script>

然后我们把代码中盒子id改成盒子的class

document.body.insertBefore(oDiv,box2);
=>
document.body.insertBefore(oDiv,boxa);

oDiv盒子消失了，这说明insert的后一个值不能是盒子的class
那insert的前一个值可以是class吗？我们把前面的那个值改成oDiv的className试试

document.body.insertBefore(oDiv,box2);
=>
document.body.insertBefore(ggb,box2);

这里写图片描述
oDiv盒子又消失了，可真惨。这说明insert的前一个值不能是class
那insert的前一个值可以是id吗？我们把前面的那个值改成oDiv的id试试

oDiv.className = "ggb";
=>
oDiv.id = "ggb";
document.body.insertBefore(oDiv,box2);
=>
document.body.insertBefore(ggb,box2);

这里写图片描述
oDiv盒子又又消失了，QAQ，这说明insert的前一个值也不能是class
看来insert的前一个值只能是变量名oDiv了
然后是第二个值
我们把它换成变量名试试

 var oDiv = document.createElement('div');
    var aDiv = document.createElement('div');
    aDiv.className= 'agb';
    oDiv.className = 'ggb';
    document.body.appendChild(aDiv);
    document.body.insertBefore(oDiv,aDiv);

这里写图片描述
成功了！
综上所述：在当前容器中，把新创建的元素增加到老元素之前，第一个元素是创建的变量名，第二个元素是盒子的id名或是之前创建的变量名。

猜你喜欢