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 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
python操作MongoDB基础知识
2013/11/01 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
大学在校生求职信范文
2013/11/21 职场文书
文体活动总结
2015/02/04 职场文书
告知书格式
2015/07/01 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
canvas实现贪食蛇的实践
2022/02/15 Javascript