使用 JavaScript 將 HTML 新增到 div 中

Anika Tabassum Era 2023年10月12日 JavaScript JavaScript Div

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

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

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

在以下示例中，我們將看到這兩種方法的使用。例項將在具有特定 id 的 main 元素下建立一個 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>`)
}