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中this关键字使用方法详解
Mar 08 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
JS实现纸牌发牌动画
Jan 19 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
win与linux系统中python requests 安装
2016/12/04 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
宿舍违规用电检讨书
2014/02/16 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
读群众路线的心得体会
2014/09/03 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
酒店前台岗位职责
2015/04/16 职场文书
教育教学工作反思
2016/02/24 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Javascript 解构赋值详情
2021/11/17 Javascript
聊聊redis-dump工具安装问题
2022/01/18 Redis