Question

我正在编写一个使用JQuery通过AJAX插入和修改HTML元素的Web应用程序。它工作得非常好，但我想确保在引擎盖下一切正常。当我在IE或Chrome中检查页面源时，它会显示原始文档标记，而不是自我的AJAX调用以来发生的变化。

我喜欢使用WC3验证器检查我的标记，因为它偶尔会提醒我忘记关闭标签等。如何从服务器提供的原始源之后检查我的页面的标记是通过Javascript更改的？

谢谢。

Answer 1

使用chrome中的开发人员工具来探索DOM：它会显示您在javascript中添加的所有HTML。

您现在可以将其复制并粘贴到您想要的任何验证器中。

或者不是在JQuery中插入代码，而是将其提供给控制台，浏览器将无法为您关闭标记。

console.log(myHTML)

Answer 2

之前的两个答案都说明了浏览器将“修复”您插入DOM中的某些HTML的事实。

回到您的问题，您可以将以下内容添加到浏览器中的书签中。它会将DOM的内容写出到新窗口，将其复制并粘贴到验证器中。

javascript:window.open("").document.open("text/plain", "").write(document.documentElement.outerHTML);

Answer 3

如果您只关心格式良好（缺少结束标记等），您可能只想检查AJAX插入的块的结构。（一旦它成为DOM的一部分，它将是格式良好的...不一定是你想要的结构。）最简单的方法可能是尝试使用XML库解析它。（如果你没有使用XHTML，那么HTML模式可以严格制定）

实际验证（测试“你不能把标签X放在标签Y里面”规则哪些浏览器通常不太在意）是很麻烦的，取决于你愿意投入多少努力它，可能不值得麻烦。（因为，如果你单独验证它们，你会得到很多“这只是一个片段”误报）

无论您决定使用哪种，如果您需要可靠的测试结果，您需要在浏览器解析之前获取AJAX响应。（虽然它们仍然只是一串文本而不是DOM树）