JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例


Posted in Javascript onJuly 30, 2018

本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.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>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
深入理解node.js http模块
Jan 24 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 #Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 #Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 #Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 #Javascript
angular-tree-component的使用详解
Jul 30 #Javascript
使用vue-router为每个路由配置各自的title
Jul 30 #Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 #Javascript
You might like
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
Eval and new funciton not the same thing
2012/12/27 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
Python多线程下载文件的方法
2015/07/10 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Python高级property属性用法实例分析
2019/11/19 Python
python3中布局背景颜色代码分析
2020/12/01 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
网络管理员岗位职责
2014/03/17 职场文书
股权收购意向书
2014/04/01 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
公司员工离职感言
2015/08/03 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书