.textContent 和 .innerHTML 使用 ‌ 的区别

Question

为什么&zwnj;在使用 Javascript.innerHTML和时渲染不一样.textContent？这是示例：window.onload = function() {  var span = document.getElementById("spanny");  var span2 = document.getElementById("spanny2");  span.textContent = "randomtext&zwnj; &zwnj;morerandomtext";  span2.innerHTML = "randomtext&zwnj; &zwnj;morerandomtext";  }<span id = "spanny"></span><br><span id = "spanny2"></span>有没有办法.textContent让它看起来像.innerHTML's 的例子？

Answer 1

innerHTML 将获得 html 标签，而 textContent 不会，您可以在控制台上看到不同之处。

<span id = "spanny"><span>abc</span></span>

<br>

<span id = "spanny2"><span>xyz</span></span>

window.onload = function() {

  var span = document.getElementById("spanny");

  var span2 = document.getElementById("spanny2");

  console.log(span.textContent)

  console.log(span2.innerHTML)

}

Answer 2

.textContent专门用于修改元素的文本内容，而.innerHTML用于修改元素的内容，可能包含标签。换句话说，修改.innerHTML会产生用给定值修改实际 HTML 代码的效果，但.textContent不会。

关于您对 HTML 字符实体的查询，事实证明，当您使用.textContent并将值设置为类似&时，它并没有真正将内容设置为&，但&即它已经转义了&，因此它不再被视为字符实体。