js appendChild( )

最新推荐文章于 2025-10-08 00:54:44 发布

原创最新推荐文章于 2025-10-08 00:54:44 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #appendChild() #javascript #添加新节点

JavaScript 专栏收录该内容

42 篇文章

订阅专栏

本文介绍如何使用JavaScript中的appendChild()方法向HTML文档中添加新的段落元素。通过创建一个新的p标签并设置其内容，然后将该元素附加到body元素上，实现动态更新页面的效果。

部署运行你感兴趣的模型镜像

js DOM 操作  appendChild()

下面的页面中有三个段落标签，我们在末尾再添加一个；

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>appendChild()</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 添加内容
                document.body.appendChild(newp); //在第二个节点之前插入新创建的节点
            }
        </script>
    </body>
</html>