本文介绍了如何使用 JavaScript 在页面加载后动态创建并设置嵌套的 `div` 元素，包括设置样式、属性以及添加内容。同时，对比了使用 `createElement` 和 `innerHTML` 两种方式，并讨论了如何动态创建和修改元素属性。
使用 createElement 动态创建嵌套 Div
这种方法更推荐，因为它更安全，也更易于维护。它允许你精确地控制每个元素的属性和样式。
HTML 结构
首先，你需要一个基本的 HTML 结构，其中包含将要插入动态创建的元素的容器。
立即学习“Java免费学习笔记（深入）”；
CSS 样式
以下是一些基本的 CSS 样式，用于控制容器的显示。
.newSyndicationModalContainer { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9999; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */}.newSyndicationModalContent { background-color: transparent; margin: auto; width: 100%; height: 100%;}
JavaScript 代码
以下 JavaScript 代码演示了如何使用 createElement 方法动态创建
和
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer");const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent");if (newSyndicationModalContainer != undefined) { // 创建 元素 var p = document.createElement('p'); p.innerText = "Hello!"; // 创建 元素 var iframe = document.createElement('iframe'); iframe.id = "syndicationPanelModalIFrame"; iframe.src = "http://sample.com"; iframe.width = "100%"; iframe.height = "100%"; iframe.style.border = "none"; // 将
和 元素添加到容器中 newSyndicationModalContent.append(p, iframe); // 显示容器 newSyndicationModalContainer.style.display = 'block';}
代码解释：
首先，使用 document.querySelector 获取 .newSyndicationModalContainer 和 .newSyndicationModalContent 元素。然后，检查 newSyndicationModalContainer 是否存在。使用 document.createElement() 创建
和
设置元素的属性，例如 innerText、id、src、width、height 和 style。使用 newSyndicationModalContent.append(p, iframe) 将创建的元素添加到 .newSyndicationModalContent 容器中。最后，设置 newSyndicationModalContainer 的 display 属性为 block，使其可见。
使用 innerHTML 动态创建嵌套 Div
虽然使用 innerHTML 更简洁，但它可能存在安全风险（例如，容易受到 XSS 攻击），并且在处理复杂结构时可能不太方便。
HTML 结构
与前一种方法相同，你需要一个基本的 HTML 结构。
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%;}
JavaScript 代码
以下 JavaScript 代码演示了如何使用 innerHTML 属性动态创建
和
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer");const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent");if (newSyndicationModalContainer != undefined) { newSyndicationModalContent.innerHTML = `Hello
`; newSyndicationModalContainer.style.display = 'block';}
代码解释：
首先，使用 document.querySelector 获取 .newSyndicationModalContainer 和 .newSyndicationModalContent 元素。然后，检查 newSyndicationModalContainer 是否存在。使用 newSyndicationModalContent.innerHTML 将 HTML 字符串插入到 .newSyndicationModalContent 容器中。最后，设置 newSyndicationModalContainer 的 display 属性为 block，使其可见。
动态修改元素属性
无论是使用 createElement 还是 innerHTML，都可以动态修改元素的属性。
示例：使用 createElement 修改属性
let div = document.createElement("div");div.innerHTML = `Bla Bla Bla Blah`;div.style = "dispaly: grid";
代码解释：
首先，使用 document.createElement() 创建一个 div 元素。然后，使用 div.innerHTML 设置 div 元素的内容，包括一个带有样式的 span 元素。使用 div.style 设置 div 元素的样式。
总结
本文介绍了两种在 JavaScript 中动态创建和设置嵌套 div 元素的方法：createElement 和 innerHTML。createElement 方法更安全、更易于维护，而 innerHTML 方法更简洁。选择哪种方法取决于你的具体需求和安全考虑。同时，也展示了如何动态修改元素的属性和样式，从而实现更灵活的页面交互。
以上就是创建并动态设置JavaScript中的嵌套Div的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597500.html
微信扫一扫 
支付宝扫一扫 
