JavaScript >> Javascript 文檔 >  >> Tags >> APP

在 JavaScript 中使用 appendChild() 添加頁面元素 [示例]

Node.appendChild() 方法向頁面添加一個新的 HTML 元素(通過 DOM)。本文將向您展示如何使用它。

JavaScript 中的 DOM

HTML DOM(文檔對像模型)是 JavaScript 用來讀取 HTML 頁面元素並與之交互的接口。

它是一種數據結構,代表頁面上存在的每個 HTML 標記 - 從包裝頁面的根 元素到每個

- 頁面上的所有內容都在 DOM 中表示,包括內容和結構。

每個 HTML 元素在 DOM 中都表示為一個節點 – 頁面元素的抽象。

添加/更新 DOM

DOM 使得添加、刪除和更新頁面上可見和不可見的 HTML 元素變得超級方便。例如,它是根據用戶輸入或正在檢索的數據向表中添加行或從 JavaScript 向下拉列表中添加選項的理想方式。

appendChild() 方法語法

appendChild() 方法必須從 DOM 節點對象調用,語法如下:

NODE.appendChild(CHILD);

請注意:

  • 節點 是您希望將子元素附加到的節點
  • 兒童 是您希望附加到 NODE 的子元素
  • appendChild()的返回值 是附加的 CHILD 節點
    • 如果附加的孩子是無父文檔片段,則返回空的 DocumentFragment

使用 appendChild() 添加元素——示例

使用 appendChild() 方法,我們必須首先有一個 HTML 元素(將在 DOM 中表示)才能使用。列表就是一個很好的例子,因為可以使用 appendChild() 添加項目 :

<ul id="my-list">
    <li>List item 1</li>
    <li>List item 2</li>
</ul>

在上面,使用 id 創建了一個簡單的 HTML 列表 我的列表 .

以下 JavaScript 將使用 appendChild() 將項目添加到列表中 方法:

var myList = document.getElementById('my-list');
var newListItem = document.createElement('li');
newListItem.innerText = 'List item 3';
myList.appendChild(newListItem);

首先,使用 getElementById() 檢索 HTML DOM 中的現有列表 .

然後,使用 createElement() 創建一個新的列表項 .這是將要追加的新子元素。

新子元素的文本是通過將其設置為 innerText 來設置的 屬性。

最後,appendChild() 可用於將新列表項附加為現有列表 my-list 的子對象 .

要刪除子元素而不是添加它,請改用 removeChild()。


Tutorial JavaScript 教程
  1. 您將需要一些腳本來使用該 JavaScript!

  2. 您需要了解的有關 docker 卷的所有信息 - Docker 提示和技巧

  3. 為什麼這個 Javascript RGB 到 HSL 代碼不起作用?

  4. 接收 Heroku 應用構建的 Discord 通知

  5. 使用 react-router 在 React 中路由

  6. 使用 WASM 在 DENO 中使用 C/C++ 代碼:在 VSCODE 中,使用 Emscripten

  7. Google Maps API:通過單擊標記打開 url

  1. 帶有 ES6 標記模板的 HTTP 請求

  2. 安裝 Svelte 並集成 Tailwind CSS(和 PostCSS)

  3. Tailwindcss 智能感知在 tsx 文件中不起作用。

  4. 從伊斯坦布爾報告創建 README 測試覆蓋率徽章

  5. 什麼是 React、Redux 以及它們之間的關係?

  6. 使用 eslint 檢查 Github 票證是否關閉

  7. 免費將 Angular 應用程序託管到 GitHub 頁面

  1. 如何在 TypeScript 中解析 JSON

  2. 離子添加無限滾動到我們的列表

  3. 了不起的蓋茨比😎

  4. 華麗的蓋茨比入門文檔