由 element.appendChild(newNode) ,谈开去

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

function f(){
document.body.appendChild(document.getElementById("btn1"))
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

因为btn1本身是dom 中的一个节点,所以 appendChild操作会将 btn1 移动到 btn4的后面,而不是复制.
利用这个特点,我们可以用极少量的代码实现另类的文字无缝滚动.

*{border:1px solid green}
a{display:block;font-size:15px};

1,你可曾有过无数的梦想，
2,却在时光的流逝里幻灭
3,你可曾对未来期待憧憬，
4,却在成长的岁月中迷失

// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
var t=setInterval(myfunc,1000)
function myfunc(){ d.appendChild(d.firstChild)}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

呵呵,是不是很简洁呢,  这个方法我在今年五月份的时候发到了CSDN上,当时引起了许许多多的JavaScript爱好
者的大讨论, 那帖子被CSDN首页置顶,三百人参与回复讨论. 
除了这个应用, appendChild的这个特性还可以在表格排序上大展身手.
注意,下面表格排序代码只是为了说明 appendChild的用法,没有在 ff中测试.

12 1
9 2
15 3
18 4
1 5

// by Go_Rush(阿舜) from http://ashun.cnblogs.com/

function $A(arrayLike){
for(var i=0,ret=[];iNumber(tr2.cells[0].innerHTML)?1:-1
}).each(function(tr){
document.getElementById("tbl").firstChild.appendChild(tr)
})
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

怎么样,有了appendChild 的大力相助,这个排序够简单吧.
关于表格的更多操作方法,和高级的自定义表格排序,请参见我在CSDN的另一个帖子(也是用appendChild实现的排序,且兼容firefox)

赞 (0)

相关推荐

  • javascript appendChild,innerHTML,join性能比较代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>appendChi

  • 一个页面元素appendchild追加到另一个页面元素的问题

    一个页面元素appendchild追加到另一个页面元素的问题

    一般都是自己创建元素然后append到页面的但是如果是页面本身有的元素append到另一个页面元素呢? 貌似是: 元素的确成为了另一个元素的子元素 而元素本身没有了. 也就是说,消失了.而不是复制 这一点,的确是这样的,但我觉的这个机制很奇怪 就不能是复制么,即1成为了2的子元素,然后1仍然在那里. 不是说需求一般是这样.恰恰相反,需求的确一般都是要删除原来的,比如这个案例 但是从逻辑上想想都是:先是append了,然后我们自己去删除掉原来的1元素 现在倒好,append还有自带有remove功

  • 走马灯效果代码js appendChild实现的无缝滚动

    *{border:1px solid blue} a{display:block;font-size:10px}; 1,河北, 2,辽宁 3,山东, 4,河南 var t=setInterval(myfunc,1000) function myfunc(){ d.appendChild(d.firstChild)} d.onmouseover=function(){clearInterval(t)} d.onmouseout=function(){t=setInterval(myfunc,100

  • 初学js插入节点appendChild insertBefore使用方法

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点.语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同. appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说). insertBefore 方法 是在已有的节点前

  • getElementByID、createElement、appendChild几个DHTML元素第1/2页

    DOCUMENT中的任一个标签: 1.getElementById() getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素. 比如说有一个DIV的ID为docid: <div id="docid"></div> 那么就可以用getElementById("docid")来获得这个元素. <html> <head> <meta h

  • javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等  复制代码 代码如下: newInput.type=mytype;   newInput.name="input1"

  • JavaScript之appendChild、insertBefore和insertAfter使用说明

    appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法 target.appen

  • 由 element.appendChild(newNode) ,谈开去

    element.appendChild(newNode) 方法中,如果 newNode本身是Dom中的一个节点. 那么appendChild方法执行的不再 是append操作了,而是一个move操作. 比如说: function f(){ document.body.appendChild(document.getElementById("btn1")) } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 因为btn1本身是dom 中的一个节点,所以 appendChild

  • appendChild() 或 insertBefore()使用与区别介绍

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div> 例1: 复制代码 代码如下: <script

  • js AppendChild与insertBefore用法详细对比

    我们知道appendChild和insertBefore都有插入节点的功能.但在应用上,这两者之间还是有一些区别的. 比如我们要在下面这个div中插入一个子节点P时: <div id="test"><p id="x1">Node</p><p>Node</p></div> 我们可以这样写(测试某种情况时请将另外一种注释): 复制代码 代码如下: <script type="text

  • 小议javascript 设计模式 推荐

    记得早前就说过要和大家分享"javascript设计模式",迟迟没写不是因为我懒,最近确实太忙,忙工作,忙旅游(啊哦?),好不容易这几天空闲了,接下来是兑现之前空口白话的时间了. 在讨论设计模式之前,请确认您已经有一定的脚本编程基础,如果不甚了解,建议可以先查阅本人很久之前写的这篇<浅谈javascript面向对象编程>请看下一篇文章. 讲到设计模式,不得不先重点着墨于"接口设计",因为接口设计在设计模式中的意义太大了,大于模式本身.直观起见,先介绍一下

  • Javascript入门学习第九篇 Javascript DOM 总结第1/2页

    1,    创建节点. createElement(): var a  = document.createElement("p"); 它创建的是一个元素节点,所以 nodeType 等于 1 . a.nodeName 将返回 p ; 注意:createElement()方法创建出来的新元素节点不会被自动添加到文档里,既然没添加到文档里,说明它还是一个游离的状态.所以它也没有nodeParent属性. 如果想把它添加到文档里,可以使用 appendChild()或者insertBefor

  • JavaScript DOM 对象深入了解

    JavaScript DOM 对象深入了解

    什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起

  • 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一)

    一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种: Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); 属性节点 Node.TEXT_NODE(3); 文本节点 Node.DOCUMENT_NODE(9); 文档节点 其实还有很多种,但是那些都不是很常用,所以就来理解这其中4种就可以了,我们先来看看节点类型,比如如

  • 编写高性能JavaScript(译)

    编写高性能JavaScript(译)

    译者按:本人第一次翻译外文,言语难免有些晦涩,但尽量表达了作者的原意,未经过多的润色,欢迎批评指正.另本文篇幅较长.信息量大,可能难以消化,欢迎留言探讨细节问题.本文主要关注V8的性能优化,部分内容并不适用于所有JS引擎.最后,转载请注明出处: ) ========================译文分割线=========================== 很多JavaScript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执行的大型JavaScript应

  • ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解

    ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解

    本文实例讲述了ThinkPHP框架整合微信支付之Native 扫码支付模式一.分享给大家供大家参考,具体如下: 大家好,这篇文章是继微信支付jsapi篇之后的微信支付系列教程第二篇:扫码支付之模式一介绍下扫码支付目前有两种模式,模式一比模式二稍微复杂点,至于模式一与模式二的具体内容,流程,微信开发文档都有详细介绍,这里就不多说废话,接下来赶紧上教程! 首先我们还是一样,导入微信支付的类库: 接下来是Public下的文件: 这里的配置跟JSAPI支付一样,不需要改动 具体关于文件介绍请参考JSAP

随机推荐