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

由于代码正在分配Element的{​​{3}}属性，因此浏览器会尝试将值解析为HTML，而不是将<0>视为HTML元素，而是选择把它当作文本价值;而<div>是一个有效的HTML元素，因此浏览器将其视为此类。

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

innerHTML

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

Answer 2

  

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

<div>元素位于.innerHTML元素<p>的结果范围内。

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