jQuery：html（）函数与真实HTML不匹配

Question

我正在尝试获取div的精确html内容。

使用jQuery中的html（）函数时，结果与实际内容不匹配。

请检查这个小提琴，然后点击黑色方块：

http://jsfiddle.net/qRska/6/

代码：

<div id="mydiv" style="width:100px; height: 100px; background-color:#000000; cursor:pointer;">

    <div id="INSIDE" style="background-color:#ffffff; border-style:none;"></div>

</div>

$('#mydiv').click(function() {
    alert($(this).html());
});

jQuery将颜色更改为RGB格式并删除border-style属性。

我该如何解决这个问题？

Answer 1

浏览器使用HTML，生成DOM，然后丢弃HTML 。 innerHTML（这是.html()最终命中的内容）将DOM的序列化返回给HTML。

如果您想获取原始HTML，那么您需要使用XMLHttpRequest来获取当前网址的源代码，然后自行处理。

Answer 2

遗憾的是，你不想做什么。原始HTML在浏览器解析后无法使用，因此您必须跳过一些环节以防止浏览器对其进行处理。

我之前使用的一种可能的解决方案是将HTML包装在注释标记中，浏览器将保持不变。然后，您可以使用jQuery的.text()方法提取注释;用字符串替换去除注释标记;对标记进行必要的更改;然后将其注入文档。

另一种方法是使用AJAX加载HTML。请务必将contentType设置为'text'，以便浏览器不会对其进行处理。