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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
js动态为代码着色显示行号
May 29 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
js如何获取网页所有图片
May 12 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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读取flv文件的播放时间长度
2009/09/03 PHP
PHP PDO函数库详解
2010/04/27 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
JS 实现百度搜索功能
2018/02/01 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
详解Python中的join()函数的用法
2015/04/07 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python查看微信好友是否删除自己
2016/12/19 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
详解python with 上下文管理器
2020/09/02 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
保洁主管岗位职责
2013/11/20 职场文书
成绩单公证书
2014/04/10 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
单位介绍信格式
2015/01/31 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书