小编Rui*_*tel的帖子

在开发一个工具时(我在这里没有考虑重要的细节,在这个问题上,考虑到我能够在下面开发MCVE),我注意到,至少在我的Chrome和Firefox版本中桌面,我从innerHTML属性中获取的字符串不等于我在HTML文件上静态编写的原始源代码.

console.log(document.querySelector("div").innerHTML);
/*
  <table>
    <tbody><tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody></table>
*/

<div>
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>
</div>

您可能已经注意到,自发<tbody>标记(我没有添加到我的HTML源代码中!)出现了,显然是由于在页面下载和页面onload事件之间进行了一段时间的预处理.在这种特殊情况下,出于我的应用目的,这种修改不会产生错误,因此可以忽略.

事实证明,在某些情况下,这种改变可能是灾难性的,特别是在删除所有标记时,如下例所示.

console.log(document.querySelector("div").innerHTML);
/*
  Hello
  World
*/

<div>
  <td>Hello</td>
  <td>World</td>
</div>

显然,在这种情况下,原始标记存在问题,但在我的应用程序中,"误用"(如<td>内部a <div>)被接受.什么是不能接受的是innerHTML被留下没有HTML标记在所有的,这导致了主要问题:我如何能得到的原始,静态编码的HTML标记<div>元素？

另外,如果可能的话,知道为什么以及如何发生这种现象也会很好,因为我很好奇:D