注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

哈哈~

八零后尾巴上的小青年^_^……

 
 
 

日志

 
 

引用 appendChild与insertBefore用法比较  

2010-09-18 16:04:36|  分类: 技术累积 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

引用

cooldhappendChild与insertBefore用法比较

我们知道appendChild和insertBefore都有插入节点的功能。但在应用上,这两者之间还是有一些区别的。

比如我们要在下面这个div中插入一个子节点P时:

<div id="test"><p id="x1">Node</p><p>Node</p></div>

我们可以这样写(测试某种情况时请将另外一种注释):

<script type="text/javascript">

var oTest = document.getElementById("test");

var newNode = document.createElement("p");

newNode.innerHTML = "This is a test";

//测试从这里开始

//appendChild方法:

oTest.appendChild(newNode);

//insertBefore方法:

oTest.insertBefore(newNode,null);

</script>

通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。(如要查看DOM,IE可以通过IE Developer Toolbar插件来查看,Firefox可以使用Firebug)

很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:

<script type="text/javascript">

var oTest = document.getElementById("test");

var refChild = document.getElementById("x1");

var newNode = document.createElement("p");

newNode.innerHTML = "This is a test";

oTest.insertBefore(newNode,refChild);

</script>

这个例子将在x1节点前面插入一个新的节点

又或:

<script type="text/javascript">

var oTest = document.getElementById("test");

var refChild = document.getElementById("x1");

var newNode = document.createElement("p");

newNode.innerHTML = "This is a test";

oTest.insertBefore(newNode,refChild.nextSibling);

</script>

这个例子将在x1节点的下一个节点前面插入一个新的节点

还可为:

<script type="text/javascript">

var oTest = document.getElementById("test");

var newNode = document.createElement("p");

newNode.innerHTML = "This is a test";

oTest.insertBefore(newNode,oTest.childNodes[0]); 

</script>

这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。

从这几个例子中得出:

appendChild() 方法在节点的子节点列表末添加新的子节点。

insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

以上内容转自:http://blog.doyoe.com/article/174.htm

  评论这张
 
阅读(403)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017