更改文本和 HTML 内容
使用 textContent 和 innerHTML 更新内容。
更改文本和 HTML 内容 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
读取和写入文本
要更改元素显示的内容，您可以设置它的文本或 HTML。正确的选择取决于您是否需要标记，以及您对数据的信任程度。
textContent
textContent 可以获取或设置元素的原始文本。设置它会用单个文本节点替换所有子节点，并将输入视为纯文本。
const el = document.querySelector("#status");
el.textContent = "Saved!";textContent 会转义标记
由于它处理的是纯文本，字符串中的任何 HTML 都会按字面显示，而不会被解析。这样可以防止注入。
el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>innerHTML
innerHTML 可以获取或设置元素内部的 HTML 标记。设置它会将字符串解析为 HTML，并创建真正的节点。
const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";innerHTML 会替换所有内容
为 innerHTML 赋值会丢弃现有子节点，并根据新的标记重建整个子树。
box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";XSS 的危险
绝不要将不受信任的用户输入放入 innerHTML。恶意字符串可能会注入脚本或事件处理程序，这种漏洞称为 XSS。
const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;innerText
innerText 与 textContent 类似，但能够感知样式：它反映渲染后的文本，并忽略隐藏元素。
console.log(el.innerText); // visible text onlytextContent 与 innerText
textContent 会返回所有文本，包括隐藏内容；由于不会触发布局计算，因此速度更快。innerText 能感知布局，但速度较慢。
el.textContent; // all text, even display:none
el.innerText; // only what is visually rendered安全地追加文本
要在不清除现有节点的情况下添加文本，请创建文本节点，或使用 insertAdjacentText，而不要覆盖 textContent。
el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");插入 HTML 而无需重新解析
insertAdjacentHTML 会在指定位置添加标记，而无需重新解析整个元素；与重建 innerHTML 相比，这样效率更高。
box.insertAdjacentHTML("beforeend", "<li>New item</li>");选择合适的属性
纯文本应使用 textContent（安全的默认选择）；只有在标记受信任时才使用 innerHTML；只有在确实需要渲染后的可见文本时，才使用 innerText。
快速检查
选择安全的方式。
回顾
textContent 会设置纯文本并进行转义，是安全的默认选择。innerHTML 会解析标记，但处理不受信任的输入时存在 XSS 风险。innerText 只反映可见的渲染文本。添加内容时，优先使用 insertAdjacentHTML/insertAdjacentText，而不要覆盖整个元素。
常见问题解答
「更改文本和 HTML 内容」课时是免费的吗？
是的 — 「更改文本和 HTML 内容」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「更改文本和 HTML 内容」这节课中我会学到什么？
使用 textContent 和 innerHTML 更新内容。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「更改文本和 HTML 内容」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。