添加 Javascript

appendChild() JavaScript 方法將元素添加到節點的末尾。 appendChild() 通常用於將

  • 元素添加到列表中。如果要向一個節點添加多個項目,則必須使用多個 appendChild () 語句。

    一些列表包含文本;其他目錄包含圖像;其他列表包含自定義 Web 項目。不管列表的內容是什麼,有一點是肯定的:網頁中充滿了列表。

    當您創建一個列表時,您通常會將其值編碼為 HTML。這個過程可以使用稱為 JavaScript appendChild 的方法來加速。此方法允許您將項目添加到列表或其他 Web 項目的末尾,例如塊引用。

    在本指南中,我們將討論 appendChild ( ) 在 JavaScript 中以及它是如何工作的。我們將看一個示例來幫助您入門。讓我們開始吧!

    什麼是 appendChild JavaScript?

    appendChild () 在父節點的末尾追加一個節點。 appendChild() 通常用於將項目添加到 HTML 列表中。節點指的是 HTML 文檔對像模型 (DOM) 的任何元素。

    appendChild () 的語法如下所示:

    “parent”是指要添加子元素的元素。 “子”是要在父項末尾添加的項。

    必須使用諸如 JavaScript getElementById() 之類的方法 或另一個“獲取”來檢索元素。或者,您可以在 JavaScript 中創建一個 HTML 元素,然後通過 appendChild () 將該元素用作“父”對象。

  • 將包含 <孩子; img> 個節點。 appendChild() 的一個常見用途是將
  • 標籤添加到列表中,例如

        appendChild () JavaScript:示例

        讓我們創建一個使用 appendChild 的應用程序。我們將創建一個網站來加載 10 年級班級的學生姓名列表。我們將其分解為三個步驟:

        • 設置前端
        • 選擇並創建元素
        • 使用 appendChild
  • 設置前端

    首先,我們將放置一個基本的界面顯示我們的學生姓名列表。打開一個名為 index.html 的文件並粘貼以下代碼:

    我們已經創建了一個基本的 HTML 文檔。這個文檔包含一個標題和一個沒有子元素的列表。列表由

      標記表示。

      現在讓我們添加在一個名為 styles.css 的文件中為我們的頁面添加一些樣式,以提高我們網頁的美感ge:

      這個 CSS 規則將為我們的頁面定義一個淺灰色的背景顏色。為此,我們使用 CSS background-color 屬性。它還將 標記的內容移動到頁面的中心。要了解有關我們如何構建佈局的更多信息,請查看我們的 CSS 框模型指南

      我們的頁面仍然無法正常工作。我們沒有在列表中添加任何內容。這是我們的頁面看起來當你在瀏覽器中打開它,如:

      <人物類=“WP-影像集團”>  53h1N2e2JcTmRTZIFItMB6Lz9mFISGZQ CP6OkNpEvNsAmFR5uykmTYLkS1F50UOokk62H14EHqSN4LOq0f3eGcfshnlatBuNVgGGf0WKaDgoBs8g . <h3 你可以添加 web 部件列表,我們必須選擇我們將使用的元素 wp-code 並添加</><pdiv class: block-codemirror-blocks-code-block code-block
      const student = document.querySelector ("ul"); 

    這行代碼會選擇我們帶有標籤

    使用JavaScript appendChild()方法

    appendChild()可以讓我們將元素添加到節點。scripts.js 文件底部的以下代碼:

    這會將我們之前創建的列表項添加到我們的列表中。讓我們打開我們的網頁並查看結果:

    <類面=“WP-圖像塊”>

    我們的班級列表現在有三個名稱。 em> appendChild () 方法。讓我們通過改變上面的例子來證明這一點。首先,將我們的 HTML 頁面更改為有兩個列表:

    我們創建了兩個列表:sat test 和沒有 sat test。現在我們更新 JavaScript 文件以選擇我們的兩個列表並創建三個學生:

    我們使用getElementById 方法來選擇我們的兩個列表。

    這段代碼將 Mark、Chloe 和 Lucy 添加到“失敗的測試”列表中。Louise 剛剛參加了測試,因此可以移動到另一個列表。您可以使用 appendChild () 方法和另一個名為 lastChild 的方法來移動它的名稱:

    這段代碼選擇我們的最後一個DOM元素列表“沒有通過測試。該元素是使用 lastChild 方法獲取的。接下來,我們將這個元素添加到我們的“sat test”列表中。

    讓我們打開我們的 HTML 文件:

    我們有兩個列表:Sam 測試:最初,我們將所有學生姓名移至“未通過測試”列表。接下來,我們使用appendChild()將Louise的名字移到“sat test”列表中。

    結論

    appendChild () 方法用於在元素的末尾創建一個節點。您可以使用 appendChild () 將任何項目添加到項目列表中。例如,你可以在

    標籤中添加一個
    元素。

    作為一個挑戰,試試看是否可以使用 JavaScript 的 appendChild () 方法來創建一個圖像網格。當頁面加載時,它應該使用 appendChild () 顯示四個圖像的列表。

    有關最佳在線 JavaScript 學習課程和資源的提示,請參閱我們的