为什么使用textContent加法赋值会导致原有HTML标签效果失效？

问题原因 #

textContent 自身的设计特性导致了这个问题，它的读写逻辑如下：

• 读取 textContent 时，只会返回元素及其所有后代的纯文本内容，所有HTML标签、元素格式都会被直接剥离，不会保留。
• 写入 textContent 时，会直接清空元素的所有原有子节点，再把传入的内容作为纯文本插入到元素内。

你使用 += 运算符操作 textContent 时，实际执行了三步操作：

1. 先读取原有元素的 textContent，拿到的是剥离了所有标签的纯文本 Somethingbold（原有 <b> 标签直接被忽略，只提取了内部的文字）
2. 将读取到的纯文本和你要追加的 Hi 拼接为 SomethingboldHi
3. 将拼接后的纯文本赋值回 textContent，这一步直接覆盖了元素原有所有内容，原来的 <b> 元素被彻底删除，自然就丢失了粗体格式。

正确的追加文本方案 #

如果要在保留原有元素内容和格式的前提下追加文本，推荐使用 append() 方法，它只会在元素末尾新增内容，不会修改原有节点：

const some = document.getElementById("divA");
some.append("Hi");

如果需要兼容低版本浏览器，也可以手动创建文本节点后追加：

const textNode = document.createTextNode("Hi");
some.appendChild(textNode);

注意：不要使用 innerHTML += "Hi" 的方式实现需求，这种方式不仅会触发原有元素的重新解析，还会有XSS注入风险，如果追加的内容包含用户输入的不可信内容会存在安全隐患。

内容的提问来源于stack exchange，提问作者Anon