使用 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
元素。
这个方法类似,被定义为可以正常执行,但是一些主流浏览器并没有修改来处理它。