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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
js添加绑定事件的方法
May 15 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
如何编写jquery插件
Mar 29 jQuery
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
Koa 使用小技巧(小结)
Oct 22 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php pdo操作数据库示例
2017/03/10 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
理解JS事件循环
2016/01/07 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
JS表单传值和URL编码转换
2018/03/03 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
pygame实现打字游戏
2021/02/19 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python实现简单遗传算法
2020/09/18 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
演讲比赛获奖感言
2014/02/02 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
寒假致家长的一封信
2015/10/10 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python