本文旨在介绍如何使用 JavaScript 在页面加载后动态创建并设置嵌套的 `div` 元素，并向其中添加内容，如段落和 `iframe`。我们将探讨两种主要方法：使用 `document.createElement` 逐个创建元素并设置其属性，以及使用 `innerHTML` 直接插入 HTML 字符串。同时，我们也会讨论如何根据需求灵活地添加不同类型的元素。
动态创建和设置嵌套Div元素
在 Web 开发中，有时需要在页面加载后动态地创建和添加 HTML 元素。这可以提高页面的性能，避免不必要的初始渲染，或者根据用户的交互动态地生成内容。本教程将介绍如何使用 JavaScript 实现这一目标，重点是如何动态创建包含 p 标签和 iframe 标签的嵌套 div 结构。
准备工作
首先，我们需要在 HTML 中定义最外层的容器 div，并赋予它相应的 class 名称。这个容器将作为我们动态创建的元素的父节点。
<div class="newSyndicationModalContainer"> <div class="newSyndicationModalContent"> </div> </div>
同时，我们需要定义相应的 CSS 样式，以便控制容器的显示和布局。例如，以下 CSS 代码可以创建一个固定定位、覆盖整个屏幕的模态框容器。
立即学习“Java免费学习笔记（深入）”；
.newSyndicationModalContainer {
display: none; /* 默认隐藏 */
position: fixed; /* 固定定位 */
z-index: 9999; /* 置于顶层 */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* 允许滚动 */
background-color: rgb(0, 0, 0); /* 黑色背景 */
background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
}
.newSyndicationModalContent {
background-color: transparent;
margin: auto;
width: 100%;
height: 100%;
}方法一：使用 document.createElement
这种方法通过 JavaScript 的 document.createElement 方法逐个创建 HTML 元素，并使用 appendChild 方法将它们添加到父元素中。这种方式更灵活，可以对每个元素的属性进行精确控制。
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer");
const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent");
if (newSyndicationModalContainer != undefined) {
// 创建 p 元素
var p = document.createElement('p');
p.innerText = "Hello!";
// 创建 iframe 元素
var iframe = document.createElement('iframe');
iframe.id = "syndicationPanelModalIFrame";
iframe.src = "http://sample.com";
iframe.width = "100%";
iframe.height = "100%";
iframe.style.border = "none";
// 将 p 和 iframe 添加到容器中
newSyndicationModalContent.append(p, iframe);
// 显示容器
newSyndicationModalContainer.style.display = 'block';
}代码解释：
- 首先，使用 document.querySelector 获取 HTML 中已经存在的容器元素。
- 然后，使用 document.createElement 创建 p 和 iframe 元素。
- 分别设置 p 元素的文本内容，以及 iframe 元素的 id、src、width、height 和 style 属性。
- 使用 newSyndicationModalContent.append(p, iframe) 将 p 和 iframe 元素添加到 newSyndicationModalContent 容器中。
- 最后，设置 newSyndicationModalContainer.style.display = 'block' 来显示整个容器。
方法二：使用 innerHTML
这种方法通过直接设置元素的 innerHTML 属性来插入 HTML 字符串。这种方式更简洁，但可读性稍差，并且需要注意安全性问题，避免 XSS 攻击。
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer");
const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent");
if (newSyndicationModalContainer != undefined) {
newSyndicationModalContent.innerHTML = `<p>Hello</p><iframe src="https://sample.com" id="syndicationPanelModalIFrame" width="100%" height="100%" style="border: none;"></iframe>`;
newSyndicationModalContainer.style.display = 'block';
}代码解释：
- 与方法一类似，首先获取容器元素。
- 然后，直接将包含 p 和 iframe 元素的 HTML 字符串赋值给 newSyndicationModalContent.innerHTML。
- 最后，显示容器。
注意事项：
- 使用 innerHTML 时，务必确保 HTML 字符串的来源是可信的，避免引入恶意代码。
- 尽量避免在循环中频繁使用 innerHTML，因为它会导致页面的重绘和重排，影响性能。
动态添加不同类型的元素
如果需要动态添加不同类型的元素，例如，不总是添加 iframe，可以使用以下方法：
let div = document.createElement("div");
div.innerHTML = `<span class="innerSpan" style="border: 5px ridge red" data-blablablah="I-don't-say-bla-bla-blah">Bla Bla Bla Blah</span>`;
div.style = "dispaly: grid";这段代码创建了一个 div 元素，并使用 innerHTML 添加了一个包含内联样式的 span 元素。可以根据需要修改 innerHTML 的内容，添加不同类型的元素和属性。
总结
本教程介绍了两种在 JavaScript 中动态创建和设置嵌套 div 元素的方法。document.createElement 方法更灵活，可以对每个元素的属性进行精确控制；innerHTML 方法更简洁，但需要注意安全性问题。选择哪种方法取决于具体的应用场景和需求。在实际开发中，可以根据需要灵活地组合使用这两种方法，以实现更复杂的功能。
