JavaScript >> Javascript 文檔 >  >> Tags >> DOM

如何在 JavaScript 中將元素插入 DOM

在我之前的文章中,我們研究瞭如何使用 vanilla JavaScript 向 HTML 元素添加標記和純文本。在本文中,您將學習使用 JavaScript 創建新元素並將其註入 DOM。

JavaScript 提供了 createElement() 方法來創建一個新的 DOM 元素。讓我們用這個方法新建一個<div> 元素:

const div = document.createElement('div');

新元素是一個完全可操作的 DOM 節點。你可以添加 CSS 類,設置 ID 和其他屬性,添加文本和標記等等:

// set attributes
div.id = 'hint';
div.className = 'course-hint';

// add markup
div.innerHTML = '<p>Learn JavaScript</p>';

準備好後,使用 appendChild() 追加的方法 將 HTML 元素添加到 DOM:

// grab target element reference
const target = document.querySelector('#intro');

// append div to target
target.appendChild(div);

上面的代碼將插入新元素作為 last-child 的目標節點。在 <body> 中插入新元素 標記,使用以下示例:

// insert element to the body
document.body.appendChild(div);

或者,您可以使用 insertBefore() 向 DOM 插入元素的方法,就在 之前之後 一個已經存在的節點如下圖:

// insert the element before target element
target.parentNode.insertBefore(div, target);

// insert the element after target element
target.parentNode.insertBefore(div, target.nextSibling);

Tutorial JavaScript 教程
  1. 如何檢測函數返回值是否被丟棄?

  2. 如何在 react 上知道你的 url 位置(使用 react-router-dom)

  3. Grunt.JS:一個 JavaScript 任務運行器

  4. React:從道具有條件地渲染

  5. 我的第一個 WordPress 插件。為什麼?如何?我學到的是。

  6. 開始使用 Javascript。

  7. userinterface.js - 小型前端庫

  1. React Pluggable:快速指南

  2. 項目 55 of 100 - Traversy 2021 React 任務應用程序

  3. Web 開發備忘單

  4. 使用 Python 和 Selenium 抓取我的 Twitter 社交圖譜

  5. FlowJS 備忘單

  6. 我在我的 Discord 機器人上添加“自動審核”功能時遇到問題

  7. 我免費贈送 1 年的編碼教程

  1. 面向 Web 開發人員的 Appwrite Realtime 入門

  2. 我在 Storify 的第一周

  3. JavaScript 全局變量 |示例代碼

  4. ASP.NET Core React 開發 - 簡介