使用 JavaScript 将 HTML 添加到 div 中

Anika Tabassum Era 2024年2月15日 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>`)
}