javascript - HTML 不显示解码的 %3C？

Question

以下代码块相似，但输入字符串不同，因此结果不同：

// This does not change HTML
var str = "%3Cdiv%3E"; // <div>
var str_dec = decodeURIComponent(str);
console.log(str_dec); // Console output is `<div>`
document.getElementById("p1").innerHTML = "1: " + str_dec; // No HTML output

// This works fine within HTML
var str = "%3C0%3E"; // <0>
var str_dec = decodeURIComponent(str);
console.log(str_dec); // Console output is `<0>`
document.getElementById("p2").innerHTML = "2: " + str_dec; // HTML output is `<0>`

<p id="p1"></p>
<p id="p2"></p>

虽然控制台显示解码在第一种情况下工作正常，但为什么它没有出现在 HTML 中？

Answer 1

这是因为<0>它不是一个有效的 HTML 标记，因为 SGML（HTML 曾经派生自的语言）标记不能以数字开头：

元素名称紧跟标签打开分隔符。元素名称由一个字母组成，后跟最多 72 个字母、数字、句点或连字符。名称不区分大小写。

https://www.w3.org/MarkUp/html3/HTMLandSGML.html

由于代码分配了innerHTMLan 的属性Element，浏览器尝试将值解析为 HTML <0>，而不是将其视为 HTML 元素，而是选择将其视为文本值；while<div>是一个有效的 HTML 元素，所以浏览器会这样对待它。

如果您在控制台中检查输出，您实际上会<div>在段落中看到一个空的 DOM 节点（p1以及 中的字符串）：<0>p2

如果您不希望浏览器将分配的值解析为 HTML，请改用更安全、更简单的textContent属性。

Answer 2

虽然控制台显示解码在第一种情况下工作正常，但为什么它没有出现在 HTML 中？

<div>元素在元素的结果.innerHTML中<p>。

"<div>"<div></div>在结果中创建html。