页面加载时for循环结合innerHTML +=插入DOM失效，如何解决？

原代码无效的核心原因是main元素不支持load事件，这个事件仅适用于window、图片、脚本等需要加载外部资源的元素，绑定在main上不会触发。以下是几种可行的解决方案：

方案1：直接调用函数（最简单高效） #

因为script标签放在main元素之后，此时main已经被解析到DOM中，直接调用函数即可立即执行插入逻辑：

<main id='outSecs'>
    foobar
</main>

<script>
    function myFn() {
        const outSecs = document.getElementById('outSecs');
        // 先拼接所有内容再一次性插入，减少DOM重绘次数
        let content = '';
        for (let q = 1; q <= 9; q++) {
            content += "<section><p class='myOutput'></p></section>";
        }
        outSecs.innerHTML += content;
    }
    // 直接执行函数
    myFn();
</script>

方案2：监听window的load事件（等所有资源加载完成） #

如果你的插入逻辑依赖页面中其他资源（比如图片、样式表）加载完成，可以绑定window的load事件：

<main id='outSecs'>
    foobar
</main>

<script>
    window.addEventListener('load', myFn);

    function myFn() {
        const outSecs = document.getElementById('outSecs');
        let content = '';
        for (let q = 1; q <= 9; q++) {
            content += "<section><p class='myOutput'></p></section>";
        }
        outSecs.innerHTML += content;
    }
</script>

方案3：监听DOMContentLoaded事件（DOM树构建完成即执行） #

如果只需要DOM结构就绪就执行，不需要等图片等资源，用DOMContentLoaded更高效：

<main id='outSecs'>
    foobar
</main>

<script>
    document.addEventListener('DOMContentLoaded', myFn);

    function myFn() {
        const outSecs = document.getElementById('outSecs');
        let content = '';
        for (let q = 1; q <= 9; q++) {
            content += "<section><p class='myOutput'></p></section>";
        }
        outSecs.innerHTML += content;
    }
</script>

额外优化建议 #

避免多次使用innerHTML +=，每次操作都会重新解析DOM并触发重绘。先把所有要插入的HTML拼接成一个字符串，再一次性赋值给innerHTML，能显著提升性能，尤其是循环次数较多时。

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