javascript - 控制台 (F12) 更正 "broken"HTML (innerHTML)

Question

这个问题已经有答案了:

HTML : draw table using innerHTML (2 个回答)

已关闭 7 年前。

我正在检查我的代码并注意到一些我以前没有意识到的事情。控制台没有显示我的代码，而是显示“更正的”数据。我认为它会显示 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 结果的序列化。

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

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

Or to turn it off?

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