添加 Javascript

Michael Zippo

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 的應用程序。我們將創建一個網站來加載 10 年級班級的學生姓名列表。我們將其分解為三個步驟：

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

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

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

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

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

const student = document.querySelector ("ul");

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

T他的代碼創建了一個帶有

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

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

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

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