本文详解为何 load 事件无法触发对 <main> 元素的 innerHTML 操作，并推荐使用 DOMContentLoaded 事件配合高效 DOM 插入方式，避免重复查询、提升性能与兼容性。

本文详解为何 `load` 事件无法触发对 `

` 元素的 innerhtml 操作，并推荐使用 `domcontentloaded` 事件配合高效 dom 插入方式，避免重复查询、提升性能与兼容性。

在 JavaScript 中，为元素绑定 'load' 事件（如 element.addEventListener('load', handler)）仅对支持 load 事件的元素有效，例如 <img>、<script>、<iframe> 等可加载外部资源的标签。而 <main> 是普通容器元素，不触发 load 事件，因此 document.getElementById('outSecs').addEventListener('load', myFn) 实际上永远不会执行，导致循环插入逻辑完全失效。

正确的做法是监听 window 的 'DOMContentLoaded' 事件——它在 HTML 文档完全解析完毕、DOM 构建完成（但图片、样式表等外部资源可能尚未加载完）时触发，是操作 DOM 的最佳时机。

以下为优化后的实现方案，兼顾可读性、性能与现代语法：

const myFn = () => {
  const mainContainer = document.getElementById('outSecs');
  // 使用 Array.from + map 一次性生成全部结构，再整体赋值
  mainContainer.innerHTML = Array.from({ length: 9 }, (_, i) => 
    `<section id="s${i + 1}"><p class="myOutput">Item ${i + 1}</p></section>`
  ).join('');
};

window.addEventListener('DOMContentLoaded', myFn);

✅ 关键改进说明：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

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

• ✅ 事件选择正确：DOMContentLoaded 确保 DOM 已就绪，且比 window.onload 更早触发；
• ✅ 避免重复 DOM 查询：只调用一次 getElementById，大幅提升性能；
• ✅ 减少重排重绘：一次性设置 innerHTML，而非多次 +=（后者会触发多次 DOM 解析与渲染）；
• ✅ 语义更清晰：使用 Array.from 和模板字符串，替代传统 for 循环，代码更简洁、不易出错。

⚠️ 注意事项：

• 若需保留原始内容（如 <main> 中的 "foobar"），可在生成新结构前先提取并拼接：

  const original = mainContainer.textContent.trim();
  mainContainer.innerHTML = original ? 
    `${original}${newSections}` : newSections;

• 如需后续动态操作 <section> 元素，建议使用 id 或 data-* 属性增强可访问性（如示例中的 id="s1"）；
• 避免在循环中直接操作 innerHTML += ... —— 它会反复解析 HTML、重建子树，造成显著性能损耗，尤其在大量节点场景下。

综上，正确响应页面加载并批量注入结构，核心在于选用合适的生命周期事件 + 批量构建 + 单次写入 DOM。这不仅是修复问题的方法，更是编写高性能前端代码的基本实践。