jQuery DOM更改不在视图源中显示

我在这里有一个简单的问题。我知道在jQuery中，你可以通过做类似的东西来dynamic地追加DOM元素

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

但是我的问题是，为什么这些元素实际上不会在代码中直观显示（例如，当您在浏览器中查看源代码时）。

请高手，让我知道为什么。谢谢

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

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

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

因为查看源只显示最初发送到浏览器的HTML。有一些方法可以看到更改后的HTML – Firefox中的Firebug，IE或Chrome中的F12开发工具。 select一些HTML并在Firefox中右键单击“查看select源”也是可行的。

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

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

在Web开发工具（Firefox插件）中有一个选项“ View generated source ”，它会给你所做的更改后生成的整个源代码。

 view source->View generated source

有时候IE / Firefox / Chrome中的开发工具跟不上你的DOM。这就意味着你正在处理一些值得Jedi的代码 – 或者Darth Vader把它留在那里供你debugging。