创建和设置嵌套Div的JavaScript动态教程_技术教程

本文旨在介绍如何使用 JavaScript 在页面加载后动态创建并设置嵌套的 `div` 元素，并向其中添加内容，如段落和 `iframe`。我们将探讨两种主要方法：使用 `document.createElement` 逐个创建元素并设置其属性，以及使用 `innerHTML` 直接插入 HTML 字符串。同时，我们也会讨论如何根据需求灵活地添加不同类型的元素。

动态创建和设置嵌套Div元素

在 Web 开发中，有时需要在页面加载后动态地创建和添加 HTML 元素。这可以提高页面的性能，避免不必要的初始渲染，或者根据用户的交互动态地生成内容。本教程将介绍如何使用 JavaScript 实现这一目标，重点是如何动态创建包含 p 标签和 iframe 标签的嵌套 div 结构。

准备工作

首先，我们需要在 HTML 中定义最外层的容器 div，并赋予它相应的 class 名称。这个容器将作为我们动态创建的元素的父节点。

同时，我们需要定义相应的 CSS 样式，以便控制容器的显示和布局。例如，以下 CSS 代码可以创建一个固定定位、覆盖整个屏幕的模态框容器。

.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 = `Hello
`;
  newSyndicationModalContainer.style.display = 'block';
}

代码解释：

与方法一类似，首先获取容器元素。
然后，直接将包含 p 和 iframe 元素的 HTML 字符串赋值给 newSyndicationModalContent.innerHTML。
最后，显示容器。

注意事项：

使用 innerHTML 时，务必确保 HTML 字符串的来源是可信的，避免引入恶意代码。
尽量避免在循环中频繁使用 innerHTML，因为它会导致页面的重绘和重排，影响性能。

动态添加不同类型的元素

如果需要动态添加不同类型的元素，例如，不总是添加 iframe，可以使用以下方法：

let div = document.createElement("div");
div.innerHTML = `Bla Bla Bla Blah`;
div.style = "dispaly: grid";

这段代码创建了一个 div 元素，并使用 innerHTML 添加了一个包含内联样式的 span 元素。可以根据需要修改 innerHTML 的内容，添加不同类型的元素和属性。

总结

本教程介绍了两种在 JavaScript 中动态创建和设置嵌套 div 元素的方法。document.createElement 方法更灵活，可以对每个元素的属性进行精确控制；innerHTML 方法更简洁，但需要注意安全性问题。选择哪种方法取决于具体的应用场景和需求。在实际开发中，可以根据需要灵活地组合使用这两种方法，以实现更复杂的功能。