标题：解决 JavaScript 中 DOM 内容写入后立即读取为空的问题

本文详解为何在 `fetch` + `innerhtml` 动态写入 html 后调用 `print()` 会读到空字符串，并提供正确的 promise 链式调用方案、现代语法优化及健壮的页面加载处理方式。

在使用 javaScript 异步获取数据并动态写入 dom（如通过 container.innerHTML += …）后，紧接着尝试读取该 DOM 内容却得到空字符串——这是前端开发中一个典型且易被忽视的执行时序错误。根本原因在于：.then(print()) 并非将 print 函数作为回调传入 Promise 链，而是立即执行 print()，此时 fetch 还未开始、showData 更未运行，container.innerHTML 自然为空。

✅ 正确写法：传递函数引用，而非调用结果

将 .then(print()) 改为 .then(print) 或 .then(() => print())：

function convertData() {   fetch('info.json')     .then(response => response.json())     .then(data => showData(data))  // ✅ 此处返回 undefined，但确保 DOM 已更新     .then(print)                    // ✅ 传递函数引用，待前一个 then 完成后执行     .catch(error => console.error('Error:', error)); }

? 关键区别：print() 是调用并返回 undefined；print 是函数本身，由 Promise 链在适当时机自动调用。

⚠️ 补充问题：showData 的副作用与性能隐患

当前 showData 使用 innerHTML += 在循环中反复拼接并重写整个容器内容，这会导致：

• 每次 += 触发一次完整 DOM 解析与重排（reflow），性能极差；
• 若 data[“data”] 较大，页面可能出现明显卡顿；
• 事件监听器（如有）会被意外销毁。

✅ 推荐重构为字符串拼接后一次性写入：

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

function showData(data) {   const container = document.getElementById("container");   let html = ""; // 缓存字符串   for (const obj of data.data) { // 使用 for...of + const 更安全     html += `
${obj.field1}; ${obj.field2};`; // 直接点语法，更简洁   }   container.innerHTML = html; // ✅ 单次写入，高效可靠 }

?️ 健壮的初始化：避免 DOMContentLoaded 时机不确定性

原代码依赖 document.addEventListener(‘DOMContentLoaded’, …)，但若脚本在 DOM 加载完成后才执行（如动态插入），事件可能已被错过。更稳妥的方式是检查 document.readyState：

function init() {   if (document.readyState === "complete") {     convertData();   } else {     window.addEventListener("load", convertData); // ✅ wait for full load (incl. images)   } } init();

? 注：load 事件比 DOMContentLoaded 更晚，确保所有资源（含图片、样式表）就绪；若仅需 DOM 就绪，可用 DOMContentLoaded，但需搭配 if/else 双重保障。

? 完整可运行示例（含模拟 fetch）

✅ 总结：关键要点速查

• ❌ 错误：.then(print()) → 立即执行，时机错乱；
• ✅ 正确：.then(print) 或 .then(() => print()) → 延迟执行，时机可控；
• ? 避免循环内 innerHTML += → 改用字符串累积 + 单次赋值；
• ? 优先使用 const/let 和点语法（obj.field1）提升可读性与安全性；
• ?️ 初始化逻辑需兼容“已加载”和“未加载”两种状态，推荐 readyState + load 组合。

遵循以上实践，即可彻底解决“写入后读不到”的问题，为后续 CSV 导出等操作奠定可靠的数据基础。