JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
作者：时光不顾 时间：2024-04-22 22:35:27
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作。分享给大家供大家参考，具体如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.aspxhome.com JS节点插入</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>
：
希望本文所述对大家JavaScript程序设计有所帮助。
来源：https://blog.csdn.net/qq_41379522/article/details/78813075
标签：JS,DOM节点,子节点,兄弟节点
0
投稿猜你喜欢
python实现zencart产品数据导入到magento(python导入数据)
2022-06-04 12:34:32
python跨文件使用全局变量的实现
2022-03-31 17:24:36
python中 OpenCV和Pillow处理图像操作及时间对比
2021-02-04 16:46:52
在ASP中使用SQL语句之9:表单操作
2007-08-11 13:18:00
SQLServer与服务器连接时出错的解决方案
2009-06-28 14:35:00
关于Python正则表达式模块之re模块
2022-12-31 08:03:46
使用SQL Server 2000索引视图提高性能
2009-01-13 13:47:00
ASP连接MySQL数据库的方法
2010-03-14 11:25:00
Go语言开发redis封装及简单使用详解
2024-05-08 10:53:30
C#操作SQLite数据库帮助类详解
2024-01-22 03:52:37
Python BS4库的安装与使用详解
2021-06-30 02:00:22
图神经网络GNN算法基本原理详解
2023-08-08 23:53:53
Python 连连看连接算法
2023-10-28 09:12:35
基于python实现Pycharm断点调试
2021-05-18 03:16:22
Django上传xlsx文件直接转化为DataFrame或直接保存的方法
2023-12-02 14:42:16
javascript中使用replaceAll()函数实现字符替换的方法
2024-04-10 16:18:47
研究Python的ORM框架中的SQLAlchemy库的映射关系
2021-05-23 14:31:07
构建成功web应用的十项黄金法则
2010-09-17 19:11:00
使用Pytorch构建第一个神经网络模型 附案例实战
2023-10-13 14:40:30
python使用opencv在Windows下调用摄像头实现解析
2021-01-08 04:13:01
