使用 JavaScript 动态创建并设置嵌套 Div 元素-html教程-PHP中文网

使用 JavaScript 动态创建并设置嵌套 Div 元素

霞舞

发布： 2025-11-16 12:43:36

原创

672人浏览过

使用 javascript 动态创建并设置嵌套 div 元素

本文档将指导你如何使用 JavaScript 在页面加载后动态创建并设置嵌套的 div 元素，包括设置样式、属性和内容。我们将通过示例代码演示如何创建包含段落和 iframe 的嵌套结构，并讨论使用 `innerHTML` 的替代方案。

动态创建嵌套 Div 元素

在 Web 开发中，有时需要在页面加载后动态地创建和修改 HTML 元素。这可以通过 JavaScript 来实现，允许我们根据用户的交互或其他条件来改变页面的结构。以下是如何使用 JavaScript 动态创建嵌套 div 元素，并设置其属性和内容。

示例：创建包含段落和 iframe 的嵌套 Div

假设我们想要创建一个模态框（Modal）的结构，其中包含一个段落和一个 iframe。模态框的 HTML 结构如下：

<div class="newSyndicationModalContainer">
  <div class="newSyndicationModalContent">
    <!-- 动态插入的内容 -->
  </div>
</div>

登录后复制

相应的 CSS 样式如下：

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

.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 代码演示了如何动态创建段落和 iframe，并将它们添加到 .newSyndicationModalContent 元素中：

const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer");
const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent");

if (newSyndicationModalContainer) {
  // 创建 <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 中
  newSyndicationModalContent.append(p, iframe);

  // 显示模态框
  newSyndicationModalContainer.style.display = 'block';
}

登录后复制

代码解释：

创客贴设计

创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

查看详情

首先，使用 document.querySelector 获取 .newSyndicationModalContainer 和 .newSyndicationModalContent 元素。
然后，使用 document.createElement 创建一个新的 <p> 元素和一个新的 <iframe> 元素。
对于 <p> 元素，设置其 innerText 属性为 "Hello!"。
对于 <iframe> 元素，设置其 id、src、width、height 和 style 属性。
使用 newSyndicationModalContent.append(p, iframe) 将创建的 <p> 和 <iframe> 元素添加到 .newSyndicationModalContent 中。
最后，设置 .newSyndicationModalContainer 的 display 样式为 'block'，以显示模态框。

使用 innerHTML 的替代方案

虽然可以使用 innerHTML 属性来动态创建 HTML 元素，但这种方法存在一些潜在的风险，例如 XSS 攻击。因此，建议使用 document.createElement 和 appendChild 等方法来创建和操作 DOM 元素。

以下是使用 innerHTML 的示例代码：

const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer");
const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent");

if (newSyndicationModalContainer) {
  newSyndicationModalContent.innerHTML = `<p>Hello</p><iframe src="http://sample.com" id="syndicationPanelModalIFrame" width="100%" height="100%" style="border: none;"></iframe>`;
  newSyndicationModalContainer.style.display = 'block';
}

登录后复制

注意事项：

使用 innerHTML 时，请确保插入的内容是安全的，以避免 XSS 攻击。
尽量使用 document.createElement 和 appendChild 等方法来创建和操作 DOM 元素，以提高代码的安全性和可维护性。

动态设置元素的属性

除了创建元素和设置其内容外，还可以动态设置元素的属性。例如，可以动态设置 <iframe> 元素的 src 属性：

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> 元素。我们还使用 style 属性设置了 <div> 元素的样式。

总结

通过本文档，你学习了如何使用 JavaScript 动态创建和设置嵌套的 div 元素。你可以使用这些技术来创建复杂的 Web 应用程序，并根据用户的交互或其他条件来改变页面的结构。记住，在动态创建 HTML 元素时，请务必注意安全性，并尽量使用 document.createElement 和 appendChild 等方法来创建和操作 DOM 元素。

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