javascript insertBefore( )

最新推荐文章于 2025-06-29 23:21:47 发布

原创最新推荐文章于 2025-06-29 23:21:47 发布 · 6.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js # insertBefore( ) #javascript

JavaScript 专栏收录该内容

42 篇文章

订阅专栏

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>