使用 JavaScript 将 HTML 添加到 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);
}
输出：
%60-Method-to-Add-%60div%60-in-HTML.webp)
每次单击按钮，都会创建一个新的 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>`)
}
输出：
%60-Method-to-Add-%60div%60-Element.webp)
可以看出，在 afterbegin 参数之后，我们明确地创建了 div 元素。每次按下按钮都会相对于前一个 div 元素创建一个新的 div 元素。
这个方法类似，被定义为可以正常执行，但是一些主流浏览器并没有修改来处理它。
