创建并动态设置JavaScript中的嵌套Div-html教程-PHP中文网

创建并动态设置JavaScript中的嵌套Div

聖光之護

发布： 2025-11-21 10:35:49

原创

187人浏览过

创建并动态设置javascript中的嵌套div

本文介绍了如何使用 JavaScript 在页面加载后动态创建并设置嵌套的 `div` 元素，包括设置样式、属性以及添加内容。同时，对比了使用 `createElement` 和 `innerHTML` 两种方式，并讨论了如何动态创建和修改元素属性。

使用 createElement 动态创建嵌套 Div

这种方法更推荐，因为它更安全，也更易于维护。它允许你精确地控制每个元素的属性和样式。

HTML 结构

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

查看详情

首先，你需要一个基本的 HTML 结构，其中包含将要插入动态创建的元素的容器。

立即学习“Java免费学习笔记（深入）”；

<div class="newSyndicationModalContainer">
  <div class="newSyndicationModalContent">
  </div>
</div>

登录后复制

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 方法动态创建 <p> 和 <iframe> 元素，并将它们添加到 .newSyndicationModalContent 容器中。

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 获取 .newSyndicationModalContainer 和 .newSyndicationModalContent 元素。
然后，检查 newSyndicationModalContainer 是否存在。
使用 document.createElement() 创建 <p> 和 <iframe> 元素。
设置元素的属性，例如 innerText、id、src、width、height 和 style。
使用 newSyndicationModalContent.append(p, iframe) 将创建的元素添加到 .newSyndicationModalContent 容器中。
最后，设置 newSyndicationModalContainer 的 display 属性为 block，使其可见。

使用 innerHTML 动态创建嵌套 Div

虽然使用 innerHTML 更简洁，但它可能存在安全风险（例如，容易受到 XSS 攻击），并且在处理复杂结构时可能不太方便。

HTML 结构

与前一种方法相同，你需要一个基本的 HTML 结构。

<div class="newSyndicationModalContainer">
  <div class="newSyndicationModalContent">
  </div>
</div>

登录后复制

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 属性动态创建 <p> 和 <iframe> 元素，并将它们添加到 .newSyndicationModalContent 容器中。

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';
}

登录后复制

代码解释：

首先，使用 document.querySelector 获取 .newSyndicationModalContainer 和 .newSyndicationModalContent 元素。
然后，检查 newSyndicationModalContainer 是否存在。
使用 newSyndicationModalContent.innerHTML 将 HTML 字符串插入到 .newSyndicationModalContent 容器中。
最后，设置 newSyndicationModalContainer 的 display 属性为 block，使其可见。

动态修改元素属性

无论是使用 createElement 还是 innerHTML，都可以动态修改元素的属性。

示例：使用 createElement 修改属性

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";

登录后复制

代码解释：

首先，使用 document.createElement() 创建一个 div 元素。
然后，使用 div.innerHTML 设置 div 元素的内容，包括一个带有样式的 span 元素。
使用 div.style 设置 div 元素的样式。

总结

本文介绍了两种在 JavaScript 中动态创建和设置嵌套 div 元素的方法：createElement 和 innerHTML。createElement 方法更安全、更易于维护，而 innerHTML 方法更简洁。选择哪种方法取决于你的具体需求和安全考虑。同时，也展示了如何动态修改元素的属性和样式，从而实现更灵活的页面交互。

以上就是创建并动态设置JavaScript中的嵌套Div的详细内容，更多请关注php中文网其它相关文章！