DOM的节点的插入插入子节点与兄弟节点

最新推荐文章于 2024-06-25 19:24:28 发布

时光不顾

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js dom

本文链接：https://blog.youkuaiyun.com/qq_41379522/article/details/78813075

js 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript的DOM操作来插入子节点和兄弟节点。通过示例代码展示了`appendChild`方法添加子节点以及`insertBefore`方法插入兄弟节点的功能，实现了动态在网页中添加新的段落。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
   <script>
       function showinsert(){ //添加子节点
           var str=document.getElementById("mydiv");
           var zif="段落五";
           var obj=document.createElement("p"); //添加哪类节点
           var objNode=document.createTextNode(zif); //创建文字节点
           str.appendChild(obj);
           obj.appendChild(objNode);
       }
       function showesideinsert(){ //添加兄弟节点
           var str=document.getElementById("mydiv");
           var zi="添加段落";
           var strBrother=str.children[1];
           var strNode=document.createElement("p");
           var strTextNode=document.createTextNode(zi);
           str.insertBefore(strNode,strBrother);
           strNode.appendChild(strTextNode);
       }
   </script>
</head>

<body>
   <div id="mydiv">
       <p onClick="showinsert()">段落一
       <p onClick="showesideinsert()">段落二
       <p>段落三
       <p>段落四
   </div>
</body>
</html>