使用 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