js在指定位置增加节点函数insertBefore()用法实例


Posted in Javascript onJanuary 12, 2015

本文实例讲述了js在指定位置增加节点函数insertBefore()用法。分享给大家供大家参考。具体分析如下:

函数原型如下:

insertBefore(参数1,参数2):在指定位置添加节点

具体代码如下:

<html>

<head>

<script type="text/javascript">

function t(){

 var nodeli = document.createElement('li');//创建一个li节点

 var li_text = document.createTextNode('蓝天');//创建一个文本节点

 nodeli.appendChild(li_text);//将文本节点追加到li节点上

 

 var nodeul = document.getElementsByTagName('ul')[0];//获取第一个UL节点

 var nodeli1 = nodeul.getElementsByTagName('li')[2];//获取ul下第3个节点——秋天

 nodeul.insertBefore(nodeli,nodeli1);//函数insertBefore()表示在哪个节点前添加。第一个参数为要插入的新节点,第二个参数为已有节点

}

</script>

</head>

<body>

<div id="container">

 <ul>

  <li>春天</li>

  <li>夏天</li>

  <li>秋天</li>

  <li>冬天</li>

 </ul>

</div>

<hr />

<button onclick="t()" value="">指定位置增加节点</button>

</body>

</html>

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

Javascript 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
jQuery制作拼图小游戏
Jan 12 #Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 #Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 #Javascript
原生javascript实现图片弹窗交互效果
Jan 12 #Javascript
原生javascript实现图片按钮切换
Jan 12 #Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 #Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 #Javascript
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
javascript第一课
2007/02/27 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
JSON Web Tokens的实现原理
2017/04/02 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python原始套接字编程实例解析
2020/01/29 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
夜不归宿检讨书
2014/02/25 职场文书
七一党日活动总结
2014/07/08 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
网络舆情信息简报
2015/07/21 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
创业计划书之家政服务
2019/09/18 职场文书