使用 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);
}
输出：
每次单击按钮，都会创建一个新的 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>`)
}
输出：
可以看出，在 afterbegin 参数之后，我们明确地创建了 div 元素。每次按下按钮都会相对于前一个 div 元素创建一个新的 div 元素。
这个方法类似，被定义为可以正常执行，但是一些主流浏览器并没有修改来处理它。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
