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 相关文章推荐
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
javascript操作cookie
Jan 17 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
详解JavaScript 事件流
Sep 02 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入门小知识
2008/03/24 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
让焦点自动跳转
2006/07/01 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python实现俄罗斯方块
2018/06/26 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
2014年班主任自我评价范文
2014/04/23 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
创业计划书之熟食店
2019/10/16 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
JavaScript 定时器详情
2021/11/11 Javascript