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 相关文章推荐
面向对象Javascript核心支持代码分享
May 23 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
完美的js图片轮换效果
Feb 05 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
详解用JS添加和删除class类名
Mar 25 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中SESSION使用中的一点经验总结
2012/03/30 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python语言基本语句用法总结
2019/06/11 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
简单了解python中的与或非运算
2019/09/18 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python如何调用字典的key
2020/05/25 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
数百万免费的图形资源:Freepik
2020/09/21 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
主管职责范文
2013/11/09 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
运动会800米加油稿
2014/02/22 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
留学推荐信范文
2014/05/10 职场文书
节能环保标语
2014/06/12 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
高考升学宴主持词
2019/06/21 职场文书
python Polars库的使用简介
2021/04/21 Python
python基于opencv批量生成验证码的示例
2021/04/28 Python
go xorm框架的使用
2021/05/22 Golang