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

使用 JavaScript 动态创建和设置嵌套 Div

霞舞

发布： 2025-11-19 10:58:14

原创

167人浏览过

使用 javascript 动态创建和设置嵌套 div

本文介绍了如何使用 JavaScript 在页面加载后动态创建和设置嵌套的 `div` 元素，包括创建 `

` 标签和 `` 标签，并设置它们的属性和样式。同时，还讨论了使用 `innerHTML` 的方法，以及如何动态修改元素的 `outerHTML`、`innerHTML` 和 `innerText` 属性。

在 Web 开发中，有时需要在页面加载后动态地创建和添加 HTML 元素。例如，根据用户的操作或从服务器获取的数据，动态地生成内容。本文将介绍如何使用 JavaScript 动态创建和设置嵌套的 div 元素，并提供示例代码和注意事项。

动态创建元素并添加到 DOM

以下示例演示了如何使用 JavaScript 动态创建 <p> 标签和 <iframe> 标签，并将它们添加到具有特定 class 的 div 元素中。

首先，HTML 结构如下：

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

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

登录后复制

对应的 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 代码如下：

WampServer

WampServer是一个在Windows上的Web开发平台，它允许您使用Apache2、PHP、MySQL和MariaDB创建动态Web应用程序。WampServer会自动安装您需要的一切，以直观地开发Web应用程序。您甚至可以在不触碰设置文件的情况下调整服务器。最重要的是，WampServer提供免费版本（在GPML许可下），包括32位和64位版本。WampServer不兼容Windows XP、SP3或Windows Server 2003。

查看详情

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 用于获取具有指定 class 的 HTML 元素。
document.createElement 用于创建新的 HTML 元素，例如 <p> 和 <iframe>。
通过设置元素的属性（例如 innerText、src、width、height 和 style），可以自定义元素的外观和行为。
newSyndicationModalContent.append(p, iframe) 将创建的 <p> 和 <iframe> 元素添加到 newSyndicationModalContent 元素中。
newSyndicationModalContainer.style.display = 'block' 使容器可见。

使用 innerHTML 动态创建元素

另一种方法是使用 innerHTML 属性来动态创建元素。虽然这种方法比较简单，但它可能会带来一些安全风险，例如 XSS 攻击。因此，建议在可信的环境中使用 innerHTML。

const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer")
const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent")
if (newSyndicationModalContainer != undefined) {
  newSyndicationModalContent.innerHTML = `<p>Hello</p><iframe src="https://www.php.cn/link/fe772ff1261b820e437821342b445539" id="syndicationPanelModalIFrame" width="100%" height="100% style="border: none;"`;
  newSyndicationModalContainer.style.display = 'block';
}

登录后复制

代码解释：

newSyndicationModalContent.innerHTML = \
Hello
<iframe src="https://www.php.cn/link/fe772ff1261b820e437821342b445539" id="syndicationPanelModalIFrame" width="100%" height="100% style="border: none;"`直接将 HTML 字符串赋值给innerHTML` 属性，从而创建元素。
newSyndicationModalContainer.style.display = 'block' 使容器可见。

动态修改元素的属性

除了创建元素之外，还可以动态修改元素的属性，例如 outerHTML、innerHTML 和 innerText。

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 = \Bla Bla Bla Blah`设置div` 元素的内部 HTML 内容。
div.style = "dispaly: grid" 设置 div 元素的样式。

总结

本文介绍了使用 JavaScript 动态创建和设置嵌套 div 元素的几种方法，包括使用 document.createElement 和 innerHTML。同时，还讨论了如何动态修改元素的属性。在实际开发中，可以根据具体需求选择合适的方法。需要注意的是，使用 innerHTML 可能会带来安全风险，建议在可信的环境中使用。

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