亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

appendChild追加元素問題

scq000 / 1484人閱讀

摘要：問題在寫東西的時候用為標(biāo)簽兩次追加相同內(nèi)容，結(jié)果卻頁面只出現(xiàn)了一個標(biāo)簽原因是把一個元素對象追到到另一個元素上，但是這個追加其實(shí)是剪切的意思。也就是說，如果追加同一個元素對象，實(shí)際上只是追加了一個元素，這就是我所出現(xiàn)的那個問題。

問題

在寫東西的時候用appendChild為li標(biāo)簽兩次追加相同內(nèi)容，結(jié)果卻頁面只出現(xiàn)了一個li標(biāo)簽

原因

appengChild是把一個元素（對象）追到到另一個元素上，但是這個追加其實(shí)是"剪切"的意思。也就是說，如果追加同一個元素（對象），實(shí)際上只是追加了一個元素，這就是我所出現(xiàn)的那個問題。

效果如圖：多次追加同一元素（對象），頁面只出現(xiàn)一個

或者換個方式來說，用appendChild為ul追加了一個li標(biāo)簽，li標(biāo)簽里面的內(nèi)容是a，然后又追加了一個li，內(nèi)容是b，再把內(nèi)容為a的li標(biāo)簽重新追加一次，你會發(fā)現(xiàn)原來頁面是a,b，但是現(xiàn)在卻變成了b,a。

效果如下：

預(yù)期效果是a、b、a，但實(shí)際卻是b、a。這就是所說的appendChild追加是一種"剪切"效果。追加同一個元素，第二次以后追加的不是沒有作用，而是為只是處理同一個元素（對象），這樣就會把之前有過一樣的元素直接拿過來用，所以順序不一樣，就相當(dāng)于"剪切"。

解決辦法

寫一個創(chuàng)建DOM對象函數(shù)，每次追加調(diào)用該函數(shù)

使用克隆節(jié)點(diǎn)（cloneNode）

創(chuàng)建函數(shù)如下：

效果如圖：

克隆節(jié)點(diǎn)如下：

效果跟第種方法一樣。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84279.html

相關(guān)文章

  • 原生JS操作DOM

    摘要：能夠改變頁面中的所有元素能夠改變頁面中的所有屬性能夠改變頁面中的所有樣式能夠?qū)撁嬷械乃惺录龀龇磻?yīng)我們需要通過操作元素，查找這些元素有三種方法通過查找通過標(biāo)簽名查找通過類名查找允許改變元素的內(nèi)容。，如使有能力對事件做出反應(yīng)。 通過html dom可以訪問javascript html文檔的所有元素。當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Mo...

    anRui 評論0 收藏0

  • 原生JS操作DOM

    摘要：能夠改變頁面中的所有元素能夠改變頁面中的所有屬性能夠改變頁面中的所有樣式能夠?qū)撁嬷械乃惺录龀龇磻?yīng)我們需要通過操作元素，查找這些元素有三種方法通過查找通過標(biāo)簽名查找通過類名查找允許改變元素的內(nèi)容。，如使有能力對事件做出反應(yīng)。 通過html dom可以訪問javascript html文檔的所有元素。當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Mo...

    ISherry 評論0 收藏0

  • 動態(tài)生成html元素并為元素追加屬性

    摘要：動態(tài)生成元素的方法有三種第一種創(chuàng)建元素，再用方法將元素添加到指定節(jié)點(diǎn)登錄第二種使用直接將元素添加到指定節(jié)點(diǎn)使用將元素直接添加到指定節(jié)點(diǎn)登錄第三種創(chuàng)建節(jié)點(diǎn)中創(chuàng)建對象，使用的工廠函數(shù)完成，格式如下，會根據(jù)傳入的標(biāo)記字符串，創(chuàng)建一個對象動態(tài)生成HTML元素的方法有三種： 第一種：document.createElement()創(chuàng)建元素，再用appendChild( )方法將元素添加到指定節(jié)點(diǎn) ...

    番茄西紅柿 評論0 收藏0

  • JavaScript實(shí)現(xiàn)左右點(diǎn)擊切換圖片具體代碼

    　　項(xiàng)目中要求實(shí)現(xiàn)左右點(diǎn)擊切換圖片，先看看想要展示效果：　　效果：　　HTML　　<!DOCTYPEhtml> 　　<html> 　　<head> 　　<metacharset="utf-8"> 　　<title>xxx——空間相冊</title> 　　<linkrel="styleshee...

    3403771864 評論0 收藏0

  • 還不打算去認(rèn)識一下webpack?

    摘要：前言隨我來去看看為時未晚第一版較淺顯的知識懂得可忽略本文方向安裝起步搭建運(yùn)行粗略代過對于資源的管理對于輸出的管理舉例介紹本地開發(fā)基礎(chǔ)服務(wù)熱更新模塊熱替換初步認(rèn)識初步構(gòu)建新建一個文件并進(jìn)入更目錄是命令初始一個文件表示跳過詢問步驟安裝 前言 隨我來,去看看webpack!(為時未晚)============》第一版(較淺顯的知識,懂得可忽略本文) 方向 安裝,起步搭建運(yùn)行. (粗略代...

    Tony_Zby 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<