[转] appendChild的特殊方法及作用！-NetWild Zone

当前状态：

为朋友用C#写一个托盘程序。。。

最新文章：

归档：

访客：

不错，博主很厉害，学习了！

博主：netwild 职业：软件工程师位置：辽宁.辽阳
E-Mail：netwild [At] 163.com QQ：52100641
晚上..对着窗口..喝着凉啤酒..吸着香烟..If...Else...End...

[转] appendChild的特殊方法及作用！

element.appendChild(newNode) 方法中,如果 newNode本身是Dom中的一个节点. 那么appendChild方法执行的不再
是append操作了,而是一个move操作. 比如说:

<html>

<script>

function f(){

document.body.appendChild(document.getElementById("btn1"))

}

</script>

<body onload=f()>

<input type=button id=btn1 value="button 1">

<input type=button id=btn2 value="button 2">

<input type=button id=btn3 value="button 3">

<input type=button id=btn4 value="button 4">

</body>

</html>

因为btn1本身是dom 中的一个节点,所以 appendChild操作会将 btn1 移动到 btn4的后面,而不是复制.

利用这个特点,我们可以用极少量的代码实现另类的文字无缝滚动.

代码如下:

<style>
*{border:1px solid green}
a{display:block;font-size:15px};
</style>
<div id="d" style="width:300px;height:200px;">
  <a href="javascript:">1,你可曾有过无数的梦想，</a>
  <a href="javascript:">2,却在时光的流逝里幻灭 </a>
  <a href="javascript:">3,你可曾对未来期待憧憬，</a>
  <a href="javascript:">4,却在成长的岁月中迷失</a>
</div>
<script>

var t=setInterval(myfunc,1000)
function myfunc(){ d.appendChild(d.firstChild)}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>

转自 Go_Rush(阿舜) 的技术博客：http://www.cnblogs.com/ashun/archive/2006/11/30/appendChild_table_sort.html

Post by netwild, 2009-8-8, Views:

Tags: appendChild javascript js

分类:WEB客户端 | 评论:0 | 引用:0 | 点击这里获取该日志的TrackBack引用地址 | 获取流量

上一篇：[原创] javascript中关于DOM及Node的常用方法
下一篇：[转] javascript 处理数组的一些函数，归纳的不错，收藏一下

或许你还对下面的文章感兴趣

[转] javascript 处理数组的一些函数，归纳的不错，收藏一下 (2009-8-3 10:56:50)
[原创] 通用表单验证函数 - FormCheck JavaScript Function (2009-8-1 10:45:33)
[原创] 使用prototype扩展的JavaScript常用函数库 (2009-7-29 17:3:45)

评论：

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

netwild Zone > 当前文章 > [转] appendChild的特殊方法及作用！