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 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
小程序实现多列选择器
Feb 15 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
vue实现登录功能
Dec 31 Vue.js
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
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
javascript代码加载优化方法
2011/01/30 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
React组件refs的使用详解
2018/02/09 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
python解决字符串倒序输出的问题
2018/06/25 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
python time.strptime格式化实例详解
2021/02/03 Python
介绍Ibatis的核心类
2013/11/18 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
代理协议书
2014/04/22 职场文书
行政求职信
2014/07/04 职场文书
名人演讲稿范文
2014/09/16 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
嘉宾邀请函
2015/01/31 职场文书