本文旨在介绍如何使用 JavaScript 在页面加载后动态创建并设置嵌套的 `div` 元素，并向其中添加内容，如段落和 `iframe`。我们将探讨两种主要方法：使用 `document.createElement` 逐个创建元素并设置其属性，以及使用 `innerHTML` 直接插入 HTML 字符串。同时，我们也会讨论如何根据需求灵活地添加不同类型的元素。
动态创建和设置嵌套Div元素
在 Web 开发中，有时需要在页面加载后动态地创建和添加 HTML 元素。这可以提高页面的性能，避免不必要的初始渲染，或者根据用户的交互动态地生成内容。本教程将介绍如何使用 JavaScript 实现这一目标，重点是如何动态创建包含 p 标签和 iframe 标签的嵌套 div 结构。
准备工作
首先，我们需要在 HTML 中定义最外层的容器 div，并赋予它相应的 class 名称。这个容器将作为我们动态创建的元素的父节点。
同时，我们需要定义相应的 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 = `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 方法更简洁，但需要注意安全性问题。选择哪种方法取决于具体的应用场景和需求。在实际开发中，可以根据需要灵活地组合使用这两种方法，以实现更复杂的功能。
以上就是创建和设置嵌套Div的JavaScript动态教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595698.html
微信扫一扫 
支付宝扫一扫 
