JS DOM 编程复习笔记：appendChild、textContent、innerText、innerHTML

各位程序员大家好！欢迎来到我们 JS DOM 编程复习笔记系列的第五篇，今天我们继续深入探讨 appendChild() 方法，同时了解 textContent、innerText 和 innerHTML 等更多 DOM API。

appendChild() 复习

在上一篇文章中，我们了解到 appendChild() 方法可以将我们创建的 DOM 元素插入到指定父元素的最后位置。通过调用 appendChild()，我们可以动态地向我们的文档中添加内容。

textContent、innerText 和 innerHTML

除了 appendChild() 之外，还有其他几种 API 可以用于修改 DOM 元素的内容。这些 API 分别是 textContent、innerText 和 innerHTML。让我们分别来看看它们的用法和区别：

• textContent： 获取或设置元素中纯文本的内容，不包括任何 HTML 或 XML 标记。
• innerText： 获取或设置元素中可见的文本内容，包括任何文本和空格，但同样不包括 HTML 或 XML 标记。
• innerHTML： 获取或设置元素中所有内容，包括 HTML 或 XML 标记、文本和注释。

举个例子，考虑以下 HTML 代码：

<div id="myDiv">
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
</div>

使用 textContent 获取 #myDiv 元素的文本内容，我们得到以下结果：

const textContent = document.querySelector("#myDiv").textContent;
console.log(textContent); // 输出："Hello World! This is a paragraph."

使用 innerText 获取 #myDiv 元素的可见文本内容，我们得到相同的结果：

const innerText = document.querySelector("#myDiv").innerText;
console.log(innerText); // 输出："Hello World! This is a paragraph."

然而，如果我们使用 innerHTML，我们得到的结果则包括 HTML 标记：

const innerHTML = document.querySelector("#myDiv").innerHTML;
console.log(innerHTML); // 输出："<h1 id='hello'>Hello World!</h1><p>This is a paragraph.</p>"

使用场景

这些 API 在不同的场景中各有其用途：

• textContent： 当需要获取或设置纯文本内容时。
• innerText： 当需要获取或设置可见文本内容（包括空格）时。
• innerHTML： 当需要获取或设置整个元素的内容，包括 HTML 或 XML 标记时。

总结

在本文中，我们复习了 appendChild() 方法，并介绍了 textContent、innerText 和 innerHTML 这三个 DOM API。理解这些 API 的区别对于有效地操作 DOM 元素的内容非常重要。

练习

请尝试使用这些 API 修改以下 HTML 代码中的文本内容：

<div id="myDiv">
  <h1>JS DOM 编程</h1>
  <p>欢迎来到 DOM 编程世界！</p>
</div>

1. 使用 textContent 将 #myDiv 元素的文本内容更改为 "DOM 编程指南"。
2. 使用 innerText 将 #myDiv 元素的可见文本内容更改为 "学习 DOM 编程"。
3. 使用 innerHTML 将 #myDiv 元素的整个内容更改为 "

   DOM 编程专家

   成为 DOM 大师！

   "。