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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
微信小程序实现全国机场索引列表
Jan 31 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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下载CSS文件中的图片的代码
2013/09/24 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
javascript 精粹笔记
2010/05/09 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js中生成map对象的方法
2014/01/09 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
python通过opencv实现批量剪切图片
2017/11/13 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python ellipsis 的用法详解
2020/11/20 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
环保建议书500字
2014/05/14 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
学生检讨书
2015/01/27 职场文书
刑事辩护词范文
2015/05/21 职场文书
于丹论语心得观后感
2015/06/15 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python