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 类方法定义还是有点区别
Apr 15 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
React事件处理的机制及原理
Dec 03 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php实现递归的三种基本方式
2020/07/04 PHP
图片自动更新(说明)
2006/10/02 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python实现Event回调机制的方法
2019/02/13 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python默认参数调用方法解析
2020/02/09 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
一套Delphi的笔试题一
2016/02/14 面试题
竞争性谈判邀请书
2014/02/06 职场文书
电子银行营销方案
2014/02/22 职场文书
人事部专员岗位职责
2014/03/04 职场文书
精彩广告词大全
2014/03/19 职场文书
银行培训心得体会范文
2016/01/09 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python