appendChild追加元素問題

scq000 發布于2019-08-20 18:16 / 1434人閱讀

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

問題

在寫東西的時候用appendChild為li標簽兩次追加相同內容，結果卻頁面只出現了一個li標簽

原因

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

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

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

效果如下：

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

解決辦法

寫一個創建DOM對象函數，每次追加調用該函數

使用克隆節點（cloneNode）

創建函數如下：

效果如圖：

克隆節點如下：

效果跟第種方法一樣。

云服務器 GPU云服務器在元素前追加html js在從前追加元素 js 元素后追加內容元素 type問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84279.html

原生JS操作DOM

摘要：能夠改變頁面中的所有元素能夠改變頁面中的所有屬性能夠改變頁面中的所有樣式能夠對頁面中的所有事件做出反應我們需要通過操作元素，查找這些元素有三種方法通過查找通過標簽名查找通過類名查找允許改變元素的內容。，如使有能力對事件做出反應。通過html dom可以訪問javascript html文檔的所有元素。當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Mo...

anRui 2019-08-20 14:49 評論0 收藏0
原生JS操作DOM

摘要：能夠改變頁面中的所有元素能夠改變頁面中的所有屬性能夠改變頁面中的所有樣式能夠對頁面中的所有事件做出反應我們需要通過操作元素，查找這些元素有三種方法通過查找通過標簽名查找通過類名查找允許改變元素的內容。，如使有能力對事件做出反應。通過html dom可以訪問javascript html文檔的所有元素。當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Mo...

ISherry 2019-08-01 16:26 評論0 收藏0
動態生成html元素并為元素追加屬性

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

番茄西紅柿 2019-04-23 13:31 評論0 收藏0
JavaScript實現左右點擊切換圖片具體代碼

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

3403771864 2022-10-27 21:26 評論0 收藏0
還不打算去認識一下webpack?

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

Tony_Zby 2019-08-23 12:51 評論0 收藏0