本文详解因误操作 DOM 元素导致 API 返回的作者名无法显示的问题，指出核心错误是将整个容器的 innerText 覆盖为纯文本，从而销毁了原有结构；提供修正方案并附可运行代码与关键注意事项。
本文详解因误操作 dom 元素导致 api 返回的作者名无法显示的问题，指出核心错误是将整个容器的 `innertext` 覆盖为纯文本，从而销毁了原有结构；提供修正方案并附可运行代码与关键注意事项。
在使用 Fetch API 动态渲染数据时，一个常见但隐蔽的错误是：对父级容器（如 以原始代码为例： 这行代码等价于： —— 和 立即学习“前端免费学习笔记（深入）”； ✅ 正确做法是：始终定位到目标子元素，仅更新其内容。本例中应分别操作 #content 和 #author： ? 关键注意事项： 通过精准操作目标 DOM 节点、验证 API 响应格式并加入健壮性处理，即可稳定实现引言与作者信息的分离渲染——这是前端数据驱动开发中最基础却至关重要的实践原则。quote.innerText = quoteData // ❌ 错误！quote 是 <div class="quote">，此举清空其全部子节点
<div class="quote">“Life is what happens when you're busy making other plans.”</div>
// script.js（修正后）
const desc = document.querySelector("#content");
const author = document.querySelector("#author");
const btn = document.querySelector("#btn");
btn.addEventListener("click", async () => {
try {
const response = await fetch("https://api.quotable.io/quotes/random");
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
// 注意：quotable.io 的 /random 接口返回单个对象（非数组），无需 data[0]
desc.innerText = data.content;
author.innerText = `— ${data.author}`; // 增加破折号提升可读性
} catch (err) {
console.error("Failed to fetch quote:", err);
desc.innerText = "Failed to load quote.";
author.innerText = "";
}
});
