javascript insertAfter()定义与用法示例


Posted in Javascript onJuly 25, 2016

本文实例讲述了javascript insertAfter()定义与用法。分享给大家供大家参考,具体如下:

HTML部分:

<div id="b">bbbbbbbbb</div>
<div>dddddd</div>

JavaScript部分:

window.onload=function(){
  var a =document.createElement("span");
  var b =document.createTextNode("cssrain");
  a.appendChild(b);
  var mubiao = document.getElementById("b");
  insertAfter(a,mubiao); 
}
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
   if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素,则直接添加。因为默认是最后
    parent.appendChild(newElement);
   } else {
    parent.insertBefore(newElement,targetElement.nextSibling);//如果不是,则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。
   }
}

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

Javascript 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
移动端js触摸事件详解
Sep 18 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 #Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 #Javascript
JavaScript表单焦点自动切换代码
Jul 24 #Javascript
javascript中sort排序实例详解
Jul 24 #Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 #Javascript
关于input全选反选恶心的异常情况
Jul 24 #Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 #Javascript
You might like
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
php中final关键字用法分析
2016/12/07 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
NumPy 数组使用大全
2019/04/25 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
《地震中的父与子》教学反思
2014/04/10 职场文书
安全技术说明书
2014/05/09 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
党员对照检查材料
2014/09/22 职场文书
给客户的检讨书
2014/12/21 职场文书
经典导游欢迎词
2015/01/26 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书