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 编写匿名函数的几种方法
Feb 21 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
如何利用React实现图片识别App
Feb 18 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 加密解密内部算法
2010/04/22 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
利用jquery操作Radio方法小结
2014/10/20 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
《中国的气候》教学反思
2014/02/23 职场文书
人事专员的岗位职责
2014/03/01 职场文书
周年庆典主持词
2014/04/02 职场文书
教师党员承诺书2015
2015/01/21 职场文书
团结友爱主题班会
2015/08/13 职场文书
感谢信
2019/04/11 职场文书