为什么 textContent 添加分配不适用于标签？答案

【问题标题】：Why does textContent addition assignment doesn't work with tags?为什么 textContent 添加分配不适用于标签？
【发布时间】：2021-09-24 11:31:59
【问题描述】：

我正在尝试使用textContent 向现有元素添加一些文本。但是当我使用+=（加法赋值）运算符但在结果中，已经存在的标签如b 已经失去了效果。我想我只是在添加它，但它对之前的内容也有影响。谁能解释为什么？ 我查看了文档，但没有找到任何相关信息。

HTML：

<div id="divA">Something<b>bold</b></div>

const some = document.getElementById("divA");
some.textContent += "Hi"; // This results in : "Something boldHi" without the bolded formatting. 
some.textContent = some.textContent + "Hi"; //This too results in the same!

提前致谢！

【问题讨论】：

标签： javascript html dom-manipulation text-manipulation

【解决方案1】：

元素的.textContent 值仅返回 - 文本内容，它是纯文本，而不是内容的 HTML 标记。

如果你这样做

some.textContent += "Hi"

将检索容器的文本内容，其中不包含任何标签-例如

<div id="divA">Something<b>bold</b></div>

将检索：

Something bold

将其连接起来，然后将结果分配回元素的.textContent 会导致元素的后代替换为单个文本节点，其中文本节点的值是分配的值。

如果您改用.innerHTML +=，则后代的先前 HTML 标记将被保留 - 但后代将全部根据分配的 HTML 标记重新解析，因此依赖于 DOM 元素的事件侦听器和相关事物将迷失。更好的选择是使用.insertAdjacentHTML，它不需要重新解析后代。

一个更好的选择是附加一个节点本身而不是尝试编写 HTML 标记（这可能是不安全的），例如

some.appendChild(document.createTextNode('Hi'))

【讨论】：

【解决方案2】：

当您使用textContent 时，您将获得Somethingbold，它只是没有 HTML 标记的纯文本

console.log(some.textContent); // Somethingbold

您附加了textContent，而不是使用innerHTML

const some = document.getElementById("divA");
some.innerHTML += "Hi"; // This results in : "Something boldHi" without the bolded formatting. 
some.innerHTML = some.innerHTML + "Hi"; //This too results in the same!

&lt;div id="divA"&gt;Something&lt;b&gt;bold&lt;/b&gt;&lt;/div&gt;

【讨论】：