javascript insertBefore( )_js insertbefore-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/79770997

js DOM 操作----insertBefore( ) 的用法；

含义：在某个元素之前插入一个新的元素；

先来写一个带有三个段落的网页：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>insertBefore()</title>
    </head>
    <body>
        <p class="first">我是第一个</p>
        <p class="second">我是第二个</p>
        <p class="third">我是第三个</p>
    </body>
</html>

接下来我们动态创建一个段落添加到first 和second 之间；

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>insertBefore()</title>
    </head>
    <body>
        <p id="first">我是第一个</p>
        <p id="second">我是第二个</p>
        <p id="third">我是第三个</p>
        <script>
            window.onload=function(){
                var newp=document.createElement("p");//创建新的节点 p
                newp.innerHTML="我是新加的";  //给新创建的节点p 添加内容
                var second=document.getElementById("second"); // 获取原本的第二个节点p
                document.body.insertBefore(newp,second); //在第二个节点之前插入新创建的节点
            }
        </script>
    </body>
</html>