成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

appendChild追加元素問(wèn)題

scq000 / 1444人閱讀

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

問(wèn)題

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

原因

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

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

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

效果如下：

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

解決辦法

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

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

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

效果如圖：

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

效果跟第種方法一樣。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84279.html

相關(guān)文章

  • 原生JS操作DOM

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

    anRui 評(píng)論0 收藏0

  • 原生JS操作DOM

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

    ISherry 評(píng)論0 收藏0

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

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

    番茄西紅柿 評(píng)論0 收藏0

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

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

    3403771864 評(píng)論0 收藏0

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

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

    Tony_Zby 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<