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的工作方式。

您从代码示例中获得的行为并不特定于浏览器devtools所做的任何事情。当您设置innerHTML时 - 无论您在何处设置它 - 浏览器首先会分析您为其分配的内容。它没有将字符串放入DOM中。所以你所看到的是从解析那些包含HTML的输入字符串的DOM结果的序列化。

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

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

或关掉它？

不，你不能把它关掉。如果您正在使用DOM操作，那么您需要进行HTML解析。浏览器以标准方式执行HTML解析，遵循HTML规范中的常见规则。您无法选择自己的规则或指定自定义规则或其他任何规则。

控制台（F12）纠正“损坏的”HTML（innerHTML）

1 个答案: