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 相关文章推荐
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
Javascript复制实例详解
Jan 28 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
为数据添加append,remove功能
2006/10/03 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python读写ini文件的方法
2015/05/28 Python
Python3中详解fabfile的编写
2018/06/24 Python
由面试题加深对Django的认识理解
2019/07/19 Python
python hashlib加密实现代码
2019/10/17 Python
Python中and和or如何使用
2020/05/28 Python
如何在Python对Excel进行读取
2020/06/04 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
实习生的自我评价
2014/01/08 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
社区食品安全实施方案
2014/03/28 职场文书
勤俭节约主题班会
2015/08/13 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL