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 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jQuery构造函数init参数分析
May 13 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
详解Vite的新体验
Feb 22 Javascript
JavaScript 定时器详情
Nov 11 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
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
JS代码实现页面切换效果
2021/01/10 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python 动态加载的实现方法
2017/12/22 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
群众路线剖析材料
2014/02/02 职场文书
小学生期末评语大全
2014/04/21 职场文书
预备党员考察意见范文
2015/06/01 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android