控制台 (F12) 更正 "broken" HTML (内HTML)

Question

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

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

有没有办法让 "fixed" 代码显示为红色（例如）？

或者关闭它？

示例：

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

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

显示<option> State Name </option>

而不是 <option> State Name（如果浏览器没有 "correct" 代码，它就会这样做。）

而且，既然如此 - 为什么 <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>

编辑：table的完整代码：

    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。因此，您看到的是 DOM 解析那些包含您开始的输入字符串的结果的序列化 -HTML。

Is there a way to have the "fixed" code displayed in red (for example)?

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

Or to turn it off?

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

控制台 (F12) 更正 "broken" HTML (内HTML)

Console (F12) correcting "broken" HTML (innerHTML)

html

javascript

innerhtml

html-parsing

google-chrome-devtools