由 element.appendChild(newNode) ,談開去

更新時(shí)間：2006年11月30日 00:00:00 作者：

element.appendChild(newNode) 方法中,如果 newNode本身是Dom中的一個(gè)節(jié)點(diǎn). 那么appendChild方法執(zhí)行的不再
是append操作了,而是一個(gè)move操作. 比如說:

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

因?yàn)閎tn1本身是dom 中的一個(gè)節(jié)點(diǎn),所以 appendChild操作會(huì)將 btn1 移動(dòng)到 btn4的后面,而不是復(fù)制.
利用這個(gè)特點(diǎn),我們可以用極少量的代碼實(shí)現(xiàn)另類的文字無縫滾動(dòng).

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

呵呵,是不是很簡潔呢, 這個(gè)方法我在今年五月份的時(shí)候發(fā)到了CSDN上,當(dāng)時(shí)引起了許許多多的JavaScript愛好
者的大討論, 那帖子被CSDN首頁置頂,三百人參與回復(fù)討論.
除了這個(gè)應(yīng)用, appendChild的這個(gè)特性還可以在表格排序上大展身手.
注意,下面表格排序代碼只是為了說明 appendChild的用法,沒有在 ff中測試.

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

怎么樣,有了appendChild 的大力相助,這個(gè)排序夠簡單吧.
關(guān)于表格的更多操作方法,和高級的自定義表格排序,請參見我在CSDN的另一個(gè)帖子(也是用appendChild實(shí)現(xiàn)的排序,且兼容firefox)

您可能感興趣的文章:

相關(guān)文章

JS從數(shù)組中隨機(jī)取出幾個(gè)數(shù)組元素的方法
JS如何從一個(gè)數(shù)組中隨機(jī)取出一個(gè)元素或者幾個(gè)元素呢？其實(shí)方法很簡單，下面小編給大家分享了JS隨機(jī)取出幾個(gè)數(shù)組元素的方法，非常不錯(cuò)，需要的朋友參考下
2016-08-08
js判斷當(dāng)前瀏覽器類型,判斷IE瀏覽器方法
這篇文章主要介紹了js判斷當(dāng)前瀏覽器類型,判斷IE瀏覽器方法,需要的朋友可以參考下
2014-06-06
JS模仿騰訊圖片站的圖片翻頁按鈕效果完整實(shí)例
這篇文章主要介紹了JS模仿騰訊圖片站的圖片翻頁按鈕效果,涉及javascript動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06
微信小程序?qū)崿F(xiàn)錨點(diǎn)定位功能的方法實(shí)例
“錨點(diǎn)”功能在實(shí)際應(yīng)用設(shè)計(jì)的好,可以提高用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)錨點(diǎn)定位功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07
uni-app自定義組件和通信的方式
組件是 vue 技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開發(fā)效率大幅提升,組件可以使用全局注冊和頁面引入兩種方式進(jìn)行使用,對uni-app自定義組件和通信相關(guān)知識感興趣的朋友跟隨小編一起看看吧
2024-03-03
微信小程序如何修改本地緩存key中單個(gè)數(shù)據(jù)的詳解
這篇文章主要介紹了微信小程序如何修改本地緩存key中單個(gè)數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為EXCEL（支持大量數(shù)據(jù)導(dǎo)出）
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為EXCEL，支持大量數(shù)據(jù)導(dǎo)出，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
bootstrap中添加額外的圖標(biāo)實(shí)例代碼
可以針對校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)。接下來通過本文給大家分享bootstrap中添加額外的圖標(biāo)實(shí)例代碼，需要的的朋友參考下吧
2017-02-02
微信小程序中使用自定義圖標(biāo)（阿里icon）的方法
這篇文章主要介紹了微信小程序中使用自定義圖標(biāo)（阿里icon）的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
JavaScript純前端實(shí)現(xiàn)語音播報(bào)和朗讀功能
這篇文章主要為大家詳細(xì)介紹了JavaScript純前端實(shí)現(xiàn)語音播報(bào)和朗讀功能的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04