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 相关文章推荐
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
JS数组的高级使用方法示例小结
Mar 14 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取整的几种方式
2013/06/25 PHP
php分页示例分享
2014/04/30 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
document.all与WEB标准
2020/05/13 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python中的编码知识整理汇总
2016/01/26 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Keras 使用 Lambda层详解
2020/06/10 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫