使用 JavaScript 將 HTML 新增到 div 中

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 在 HTML 中使用 createElement() 方法新增 div
  2. 使用 insertAdjacentHTML() 方法新增 div 元素
使用 JavaScript 將 HTML 新增到 div 中

要從 JavaScript 建立 div 元素,你必須操作 DOM。最常用和首選的方式取決於建立 div 元素的 createElement() 方法。

我們還可以在建立的 div 元素中宣告必要的其他元素。一種較少實踐的方法是 insertAdjacentHTML(),Firefox 和 Safari 通常不支援這種方法。

在以下示例中,我們將看到這兩種方法的使用。例項將在具有特定 idmain 元素下建立一個 div 元素。

在 HTML 中使用 createElement() 方法新增 div

在這裡,我們將首先建立一個 button 元素來觸發一個建立新元素的函式。我們還將為要新增到此段的新 div 元素設定 main 元素和 id=content

在我們的 JavaScript 行中,我們將為 div 元素建立一個例項,該例項將啟動 createElement('div') 為該例項設定一個值。在 innerHTML 中,我們還將定義一個命令,以確保我們的 div 在函式呼叫時建立。

程式碼片段 - HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<body>
<button onclick="add()">Make div</button>
  <main id="content"></main>
</body>
</html>

程式碼片段 - JavaScript:

function add() {
  const div = document.createElement('div');
  div.innerHTML = "new div";
  document.getElementById('content').appendChild(div);
}

輸出:

使用 createElement() 方法在 HTML 中新增 div

每次單擊按鈕,都會建立一個新的 div 元素,其內容為 new div。需要密切注意的是 div 元素維護父元素和子元素的層次結構。

由於新的 div 元素是 main 元素的子元素,因此 appenChild() 方法正在執行。

使用 insertAdjacentHTML() 方法新增 div 元素

insertAdjacentHTML() 指的是新增子 div 元素的特定位置和正確格式。在這種情況下,我們有這個 afterbegin 引數,它在開始後立即建立一個 div,也就是第一個孩子。

這個迴圈將繼續,直到它滿足任何中斷條件。

程式碼片段 - HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<body>
<button onclick="add()">Make div</button>
  <main id="content"></main>
</body>
</html>

程式碼片段 - JavaScript:

function add() {
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    `<div class="row">
      <input type="text" name="name" value="Generated div" />
    </div>`
  )
}

輸出:

使用 insertAdjacentHTML() 方法新增 div 元素

可以看出,在 afterbegin 引數之後,我們明確地建立了 div 元素。每次按下按鈕都會相對於前一個 div 元素建立一個新的 div 元素。

這個方法類似,被定義為可以正常執行,但是一些主流瀏覽器並沒有修改來處理它。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript Div