我正在尝试使用textContent向现有元素添加一些文本。但是当我使用+=（加法赋值）操作符时，结果中已经存在的标记（如b）失去了作用。我认为我只是在增加它，但它在前面的内容中也有效果。有人能解释为什么吗？我检查了文档，但没有找到任何关于这方面的信息。

HTML：

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

JS

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!

谢谢了！

顺晟科技：

.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'))

当您获取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!

<代码><；DIV ID=“ DIVA ”>；某物<；B>；粗体<；/B>；<；/DIV&>；