Chrome中元素文本被双引号包裹？jQuery html()无引号原因探究

嘿，这个问题我之前也留意过，其实核心是Chrome DevTools的显示逻辑和jQuery html()的序列化逻辑不一样，给你拆解清楚：

• Chrome DevTools的引号是「显示用的」，不是实际DOM内容
  当你在DevTools的Elements面板里看元素的内部文本时，那些双引号是DevTools为了区分文本节点和其他节点（比如元素节点、属性）特意加上的可视化标记，方便你一眼识别这是纯文本内容。但实际上，DOM里的文本节点本身就是不带引号的纯字符串，引号只存在于DevTools的显示层，不是真实的DOM数据。

• jQuery的html()返回的是「序列化后的内部HTML」
  html()方法的作用是把元素的子节点（包括文本、标签等）转换成符合HTML语法的字符串。对于纯文本节点，HTML语法里本来就不需要用引号包裹，所以序列化的时候直接输出文本内容即可。比如你的实验代码：

  <p id="simple-text">This is a simple paragraph .</p>
  

  调用$('#simple-text').html()时，返回的就是纯文本This is a simple paragraph .，和DOM里实际存储的文本内容完全一致，自然不带引号。

再举个混合内容的例子验证：如果你的HTML是<p>Hi <span>there</span>!</p>，DevTools里会显示内部内容为"Hi " <span>"there"</span> "!"，但调用html()返回的是Hi <span>there</span>!——这就能看出来，DevTools的引号只是为了标记文本节点，而html()输出的是标准的HTML字符串，遵循HTML的语法规则。

内容的提问来源于stack exchange，提问作者CryptoBird