jQuery DOM 更改未出现在视图源中答案

【问题标题】：jQuery DOM changes not appearing in view sourcejQuery DOM 更改未出现在视图源中
【发布时间】：2012-01-25 19:07:51
【问题描述】：

我有一个简单的问题。我知道使用 jQuery，您可以通过执行类似的操作在 DOM 中动态添加 HTML 元素

$('').append('<p>Test</p>');

但我的问题是，为什么这些元素实际上并没有在代码中直观地出现（例如，当您在浏览器中查看源代码时）。

请专家，告诉我为什么。谢谢

【问题讨论】：

【解决方案1】：

原始来源永远不会改变。只有 DOM 发生变化。

您可以使用浏览器的开发工具查看 DOM 更改的 HTML 可视化。

您应该知道，当您操作 DOM 时，您永远不会操作 HTML。开发人员工具提供的 HTML 可视化是对 DOM 当前状态的解释。没有实际修改 HTML 标记。

【讨论】：

【解决方案2】：

因为查看源代码只显示最初发送到浏览器的 HTML。不过，有一些方法可以查看更改后的 HTML - Firefox 中的 Firebug、IE 或 Chrome 中的 F12 开发人员工具。在 Firefox 中选择一些 HTML 并右键单击“查看选择源”也可以。

【讨论】：

【解决方案3】：

“查看源代码”仅显示在浏览器向服务器请求特定网页时服务器发送的源代码。因此，由于这些更改是在客户端进行的，因此它们不会显示在“查看源代码”上，因为它们是在原始页面交付之后进行的。

要查看页面的实时源代码，您可以使用 webkit 浏览器中的 Web Inspector 视图或 Firefox 中的 Firebug。它们会跟踪对 DOM 的任何更改并更新您可以看到的源代码。

【讨论】：

【解决方案4】：

IE/Firefox/Chrome 中的开发工具有时跟不上您的 DOM。这只是意味着你正在处理一些值得绝地武士使用的代码——或者达斯维德把它留在那里让你调试。

【讨论】：

什么时候？我正在使用 jquery.chosen 更新表单选择，并没有看到 Chrome devtools 中的原始 html 发生变化，但如果我在控制台中检查元素 $('.my-select')，我发现当前值是准确的......
当 javascript 作为 ajax 有效负载的一部分动态注入页面时，我会得到这种行为。

【解决方案5】：

Web 开发人员工具（Firefox 插件）“View generated source”中有一个选项，它将为您提供在您进行更改后生成的完整源代码。

view source->View generated source

【讨论】：