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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
javascript实现画板功能
Apr 12 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
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
smarty简单应用实例
2015/11/03 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python 中 Meta Classes详解
2016/02/13 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Java基础面试题
2012/11/02 面试题
体现团队精神的口号
2014/06/06 职场文书
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers