js在指定位置增加节点函数insertBefore()用法实例
更新时间：2015年01月12日 11:19:38 投稿：shichen2014
这篇文章主要介绍了js在指定位置增加节点函数insertBefore()用法,实例分析了insertBefore()函数追加结点的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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>
<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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了js图片轮播效果实现原理，帮助大家更好地实现图片轮播效果，真正理解图片轮播原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了JavaScript获取当前时间向前推三个月的方法,结合实例形式分析了javascript日期与时间运算相关操作技巧,需要的朋友可以参考下2017-02-02
本篇文章主要是对JS中document对象的一些重要属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
ECHO.js 纯javascript轻量级延迟加载的实例代码
下面小编就为大家带来一篇ECHO.js 纯javascript轻量级延迟加载的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最近客户在使用我们的流量监测系统以及GA时发现了一个问题，我们统计到的数据比GA的要多很多倍，而且我们统计到的数据中，跳出率非常高，高达99%左右。2010-09-09
区分JS中的undefined,null,"",0和false
区分JS中的undefined,null,"",0和false...2007-03-03
JavaScript CollectGarbage函数案例详解
这篇文章主要介绍了JavaScript CollectGarbage函数案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了详解Chart.js轻量级图表库的使用经验，Chart.js很容易上手，只需要在页面中引用脚本文件，并创建 <canvas> 节点即可渲染出图表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
对支持sourceIndex的HTML文档的节点重排，使用JK提供的思路，速度至少比单纯使用nodes.sort(function(a,b){return a.sourceIndex - b.sourceIndex})这种方式快两倍2011-01-01
Echarts官网上提供了很多图表例子供我们白嫖,有时候遇到数据量比较大时,它会向后台请求json文件来加载图表数据,这篇文章主要给大家介绍了echarts读取JSON文件并画图的相关资料,需要的朋友可以参考下2023-06-06
最新评论