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 27 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
详解Javascript实践中的命令模式
May 05 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
js回调函数仿360开机
2019/12/26 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
Python中的闭包总结
2014/09/18 Python
bpython 功能强大的Python shell
2016/02/16 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python图书管理系统
2020/04/05 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python实现flappy bird小游戏
2018/12/24 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
关于python字符串方法分类详解
2019/08/20 Python
python sorted方法和列表使用解析
2019/11/18 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
Python里面search()和match()的区别
2016/09/21 面试题
应届专科生个人的自我评价
2014/01/05 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
医院感染管理制度
2015/08/05 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书