本文详解为何 load 事件无法触发 innerHTML += 循环插入，推荐使用 DOMContentLoaded 替代，并提供高性能、语义清晰的现代写法（ES6 + Array.from + 模板字符串）。
本文详解为何 `load` 事件无法触发 `innerhtml +=` 循环插入，推荐使用 `domcontentloaded` 替代，并提供高性能、语义清晰的现代写法（es6 + `array.from` + 模板字符串）。
在实际开发中，许多开发者会尝试为 DOM 元素绑定 'load' 事件来执行初始化逻辑，例如动态生成多个 <section>。但需明确：load 事件不适用于普通 HTML 元素（如 <main>），它仅对 <img>、<script>、<iframe> 等具有资源加载行为的元素有效。因此，document.getElementById('outSecs').addEventListener('load', myFn) 实际上永远不会触发——这是代码失效的根本原因。
正确做法是监听 window 的 DOMContentLoaded 事件，它在 HTML 文档完全解析完成、DOM 树构建完毕后立即触发（不等待样式表、图片等外部资源），既及时又可靠。
以下为优化后的完整实现：
const myFn = () => {
const mainContainer = document.getElementById('outSecs');
// 一次性生成全部结构，避免重复 DOM 查询和增量渲染
mainContainer.innerHTML = Array.from({ length: 9 })
.map((_, i) => `<section id="s${i}"><p class="myOutput">${i + 1}</p></section>`)
.join('');
};
window.addEventListener('DOMContentLoaded', myFn);✅ 关键优化点说明：
立即学习“Java免费学习笔记（深入）”；
- 避免重复查询 DOM：document.getElementById('outSecs') 仅执行一次，提升性能；
- 摒弃 += 增量拼接：多次 innerHTML += 会导致浏览器反复解析、重建 DOM，开销大且易引发意外覆盖（原 <main> 中的 "foobar" 将被清空）；
- 使用 Array.from() + map()：声明式生成结构化 HTML，逻辑清晰、易于维护；
- 模板字符串增强可读性：支持动态插值（如 ${i + 1}），语义直观；
- id 属性唯一性保障：为每个 <section> 添加唯一 id="s0" 至 id="s8"，便于后续精准操作。
⚠️ 注意事项：
- 若需保留原始文本 "foobar"，应在生成内容前先提取或将其作为首项纳入循环；
- 如需兼容旧版浏览器（如 IE），需将箭头函数、模板字符串及 Array.from 替换为传统写法（如 for 循环 + 字符串拼接）；
- 大量节点插入时，建议考虑 DocumentFragment 进一步优化性能（本例 9 个节点影响极小，可忽略）。
综上，用 DOMContentLoaded 替代无效的 'load' 监听，并采用一次性批量渲染策略，是安全、高效、符合现代 Web 开发规范的最佳实践。
