控制台（F12）更正“损坏的”HTML（innerHTML）[重复]

Question

我在检查我的代码时发现了一些我以前没有意识到的东西。控制台没有显示我的代码，而是显示“更正”的数据。我想它会显示 Chrome 显示的内容是有道理的，但我确实浪费了很多时间，因为我在代码中找不到错误。

问题是：人们如何处理这个问题？

有没有办法让“固定”代码显示为红色（例如）？

或者关闭它？

---

例子：

    for ( i=0; i<usStates.length; i++){

          addToUSstates.innerHTML=addToUSstates.innerHTML+"<option>"+usStates[i][0]+"";
}

显示<option> State Name </option>

而不是<option> State Name（如果浏览器没有“更正”代码。）

---

而且，既然如此 - 为什么<td>s未呈现。

例子：

for ( i=0; i<10; i++){

      addToExcel.innerHTML=addToExcel.innerHTML + "<td>aaa</td>";
}

显示 aaaaaaaaa（没有 <td> and </td>）而

for ( i=0; i<10; i++){

      addToExcel.innerHTML=addToExcel.innerHTML + "<div>aaa</div>";
}

正确显示内容：<div> aaa </div>

---

编辑：表格的完整代码：

    for ( i=0; i<10; i++){

addToExcel.innerHTML=addToExcel.innerHTML + "<tr><td>aaa</td></tr>";

}

addToExcel.innerHTML="<table>"+addtoExcel.innerHTML;
addToExcel.innerHTML=addtoExcel.innerHTML+"</table>";

Answer 1

因为这就是 innerHTML 的工作原理。

您将从代码示例中获得的行为并不特定于浏览器开发工具所做的任何事情。当你设置innerHTML——不管你在哪里设置——浏览器首先解析你分配给它的内容。它不是将字符串放入 DOM。因此，您看到的是解析那些您开始的包含 HTML 的输入字符串的 DOM 结果的序列化。

有没有办法让“固定”代码显示为红色（例如）？

不，没有。除非您想首先手动将每个输入字符串的副本存储在代码中的某个变量中，然后将其与获取.innerHTML 的结果进行比较。否则，浏览器不会记录你给它们的每个字符串，以及它们对其执行的每个操作，以便你可以回滚它或其他什么。

或者关闭它？

不，您不能将其关闭。如果您正在使用 DOM 操作，则您要求进行 HTML 解析。浏览器以标准方式进行 HTML 解析，遵循 HTML 规范中的通用规则。您无法选择自己的规则或指定自定义规则或其他任何规则。