用 JavaScript 改 HTML
页面上已经有一张轮渡纸条：船名是 Gull，时间是 09:10，备注写着 Boarding。改 HTML，就是往你已经拿到的元素里写新内容。boat.textContent = "Heron" 放进去的是普通文字 Heron。note.textContent = "<em>Late</em>" 会把这些字符原样显示出来，note.querySelector("em") 是 null。note.innerHTML = "<em>Late</em>" 会造出一个文字为 Late 的 em。这之后 note.textContent 是 Late，而 note.innerHTML 里仍带着标签。再写一次 note.innerHTML = "Dock 2"，那个 em 就被删掉。note.insertAdjacentHTML("beforeend", " <span>gate B</span>") 保留 Dock 2，再补上 gate B，备注读成 Dock 2 gate B。时间没有被赋值，所以一直是 09:10。
这页是在写，不是再找一遍
上一页比较的是怎么找到节点。这一页不数集合，不读下标，也不沿着 parentElement 走。getElementById 只是把纸条交给你。要学的是你赋进去的值。
每次写入在备注上留下什么
备注从 Boarding 开始。按顺序看每一行。每次赋值要么换掉备注，要么把它加长。
📊 每次写入在备注上留下什么
| 写入 | 你看到的 | 还留下什么 | 容易混 |
|---|---|---|---|
textContent = "Heron" 写在船上 |
Heron | 一个文本节点 | 一个名叫 Heron 的元素 |
textContent = "<em>Late</em>" |
字符 <em>Late</em> |
没有 em 元素 |
真的 em |
innerHTML = "<em>Late</em>" |
Late | 一个 em |
以为 textContent 里还有标签 |
innerHTML = "Dock 2" |
Dock 2 | em 没了 |
em 还挨着 Dock 2 |
insertAdjacentHTML("beforeend", " <span>gate B</span>") |
Dock 2 gate B | Dock 2 再加一个 span |
用 innerHTML 会丢掉 Dock 2 |
textContent 存的是字符串，不解析标签。innerHTML 会解析标签，并把元素里原有的子节点全部丢掉。insertAdjacentHTML 也会解析标签，但 beforeend 是把新节点放在现有内容后面。窗口上敲进去的船名应该放进 textContent。同一串字符若交给 innerHTML，小于号会被当成标记。
先读纸条，再写
文件打开时有三个值。还没有任何赋值。
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);
三次输出是 Gull、09:10 和 Boarding。时间是单独的一段。后面的写入都不会碰到 when。
字还是字
textContent 用一个文本节点换掉全部子节点。看起来像标签的字符仍然是字符。
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.textContent = "<em>Late</em>";
console.log(boat.textContent);
console.log(note.textContent);
console.log(note.querySelector("em"));
第一行是 Heron。第二行是字符 <em>Late</em>。第三行是 null。备注把标签当文字显示，并没有造出元素。
innerHTML 才会造出元素
把同一串字符交给 innerHTML。解析器把它变成节点，并换掉备注里原来的内容。
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);
第一行是 Late。第二行是 <em>Late</em>，因为 innerHTML 返回的是带标签的标记字符串。第三行是 false：em 在，所以它不是 null。看得见的词和标记字符串，是同一个元素的两种读法。
下一次 innerHTML 会清掉这个 em
新的 innerHTML 会换掉整段备注。em 不会留在新文字旁边。
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));
第一行是 Dock 2。第二行是 null。Boarding 早就没了。这一次连 em 也没了。
加上 gate B，Dock 2 还在
insertAdjacentHTML("beforeend", ...) 解析一段片段，放到末尾。这个字符串以空格开头，两段话才不会粘成一个词。别的位置也有。这一页只用 beforeend。
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);
第一行是 Dock 2 gate B。第二行是 gate B。Dock 2 还在备注里。若用 innerHTML 赋同一段 span 字符串，Dock 2 会被删掉。
纸条下面的一行
脚本放在 body 末尾，纸条已经在页面上。它先把 Late 这个词存下来，再让 Dock 2 换掉 em，然后用船名、存下的词，以及加上 gate B 之后的备注，拼出一行。
<!DOCTYPE html>
<html>
<head>
<title>changing html — page</title>
</head>
<body>
<article id="slip">
<h2 id="boat">Gull</h2>
<p id="when">09:10</p>
<p id="note">Boarding</p>
<p id="line">…</p>
</article>
<script>
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.innerHTML = "<em>Late</em>";
let late = note.textContent;
note.innerHTML = "Dock 2";
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
document.getElementById("line").textContent = boat.textContent + " / " + late + " / " + note.textContent;
</script>
</body>
</html>
这一行是 Heron / Late / Dock 2 gate B。时间仍是 09:10。行里的 Late 是清掉之前存下的词。备注本身已经不写 Late。下一页改的是这类元素的 CSS，不会再教一种新的选取办法。
核对这张纸条
- 输出三个起始文本，期望 Gull、09:10 和 Boarding
- 把船写成 Heron，把备注写成 em 那些字符，期望那串字符，以及 em 为 null
- 把 innerHTML 设成 em 字符串，期望 textContent 为 Late，innerHTML 仍带标签，并且 em 不是 null
- 把 innerHTML 设成 Dock 2，期望 em 为 null
- 用 beforeend 加上 span，期望 Dock 2 gate B，再期望 span 的文字是 gate B
- 读这一行，期望 Heron / Late / Dock 2 gate B；读时间，期望 09:10
这张纸条上容易写错的地方
页面照样会打开。赋进去的值种类不对。
- 把窗口上敲的名字放进
innerHTML，<会被当成标记 - 以为
textContent = "<em>Late</em>"会造出em - 写完 em 之后去读
textContent，还指望那串字符串里有标签 - 再次赋值
innerHTML，还指望em留着 - 用
innerHTML去加 gate B，结果 Dock 2 没了 - 丢掉开头的空格，备注变成
Dock 2gate B - 在这一页设置
style；下一页才改 CSS - 在这里调用
createElement；后面的页面才新建节点
带走这些
textContent写的是纯文本，不解析标签innerHTML解析标签，并换掉每一个子节点- 写完 em 之后，
textContent是 Late，innerHTML里仍有标签 - 第二次
innerHTML会删掉em insertAdjacentHTML("beforeend", ...)追加标记，Dock 2 还在- 时间停在 09:10，因为没有人给它赋值
- 这一行是 Heron / Late / Dock 2 gate B
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部