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 24 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
javascript常见操作汇总
Sep 03 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
vue中render函数的使用详解
Oct 12 Javascript
js实现简单分页导航栏效果
Jun 28 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动态生成JavaScript代码
2009/03/09 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
js三种排序算法分享
2012/08/16 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
了解重排与重绘
2019/05/29 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python socket处理client连接过程解析
2020/03/18 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
什么是Rollback Segment
2013/04/22 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
我爱读书演讲稿
2014/05/07 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
公司食堂管理制度
2015/08/05 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
讲解MySQL增删改操作
2022/05/06 MySQL
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python