如何在页面加载时用JavaScript动态创建嵌套Div及指定元素

需求是页面加载时，通过JavaScript动态生成<p>Hello</p>和指定的iframe，所有相关元素（包括外层模态框容器、样式）都不能提前在HTML中声明，最终要生成的结构如下：

<style>
    .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%;
    }
</style>

<div class="newSyndicationModalContainer">
    <div class="newSyndicationModalContent">
        <p>Hello</p><iframe id="syndicationPanelModalIFrame" src="http://sample.com" width="100%" height="100%" style="border: none"></iframe>
    </div>
</div>

你当前的代码存在两个核心问题：

• 试图查询已经存在的.newSyndicationModalContainer容器，但需求要求完全动态创建，不能提前声明这些元素
• 使用document.createElement()传入多元素的HTML字符串，这个方法只能创建单个DOM元素，无法直接解析多元素的HTML片段

正确实现代码 #

// 页面加载完成后执行
window.addEventListener('load', function() {
    // 1. 动态创建样式标签并添加到head
    const style = document.createElement('style');
    style.textContent = `
        .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.head.appendChild(style);

    // 2. 创建外层容器
    const container = document.createElement('div');
    container.className = 'newSyndicationModalContainer';

    // 3. 创建内层内容容器
    const content = document.createElement('div');
    content.className = 'newSyndicationModalContent';

    // 4. 添加需要的p和iframe元素到内容容器
    content.innerHTML = '<p>Hello</p><iframe id="syndicationPanelModalIFrame" src="http://sample.com" width="100%" height="100%" style="border: none"></iframe>';

    // 5. 嵌套容器并添加到body
    container.appendChild(content);
    document.body.appendChild(container);

    // 6. 显示模态框
    container.style.display = 'block';
});

代码说明 #

• 用window.addEventListener('load')确保页面加载完成后执行代码，避免DOM未就绪的问题
• 动态创建样式标签并插入到<head>，完全替代提前编写的CSS
• 依次创建外层容器、内层内容容器，通过innerHTML直接插入需要的p和iframe片段（也可以分别创建p和iframe元素再用appendChild添加，效果一致）
• 最后把完整的DOM结构添加到页面body，并设置显示状态

内容的提问来源于stack exchange，提问作者Joseph