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和as的稳定传值问题解决
Jul 14 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
js代码实现轮播图
May 04 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
JS实现公告上线滚动效果
Jan 10 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自动给文章加关键词链接的函数代码
2012/11/29 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
vue增删改查的简单操作
2017/07/15 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
python简单实现旋转图片的方法
2015/05/30 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python 项目转化为so文件实例
2019/12/23 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
Python实现简单的2048小游戏
2021/03/01 Python
详解rem 适配布局
2018/10/31 HTML / CSS
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
社团文化节策划书
2014/02/01 职场文书
宣传口号大全
2014/06/16 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技