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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JQuery中clone方法复制节点
May 18 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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来检测proxy
2006/10/09 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python argparse模块使用方法解析
2020/02/20 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
2014年五四青年节演讲稿范文
2014/04/22 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
安全例会汇报材料
2014/08/23 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
小学庆六一主持词
2015/06/30 职场文书