javascript jQuery DOM 更改未出现在视图源中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8598836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DOM changes not appearing in view source
提问by user765368
I have a simple question here. I know with jQuery you can dynamically append HTML elements in the DOM by doing stuff like
我在这里有一个简单的问题。我知道使用 jQuery，您可以通过执行以下操作在 DOM 中动态附加 HTML 元素
$('').append('<p>Test</p>');
But my question is, why don't these elements actually appear visually in the code (when you View Source in your browser for example).
但我的问题是，为什么这些元素实际上没有出现在代码中（例如，当您在浏览器中查看源代码时）。
Please experts, let me know why. Thanks
请高手告诉我原因。谢谢
回答by
The original source never changes. Only the DOM changes.
原始来源永远不会改变。只有 DOM 发生了变化。
You can see an HTML visualization of DOM changes using your browser's developer tools.
您可以使用浏览器的开发人员工具查看 DOM 更改的 HTML 可视化。
You should be aware that when you manipulate the DOM, you're never manipulating HTML. The HTML visualization offered by the developer tools is an interpretationof the current state of the DOM. There's no actual modification of HTML markup.
您应该知道，当您操作 DOM 时，您绝不会操作 HTML。开发人员工具提供的 HTML 可视化是对 DOM 当前状态的解释。没有对 HTML 标记进行实际修改。
回答by mikel
Because View Source only shows the HTML that was sent to the browser originally. There are ways of seeing the changed HTML though - Firebug in Firefox, F12 developer tools in IE or Chrome. Selecting some HTML and right-clicking "View Selection Source" in Firefox will also work.
因为 View Source 只显示最初发送到浏览器的 HTML。有很多方法可以查看更改后的 HTML - Firefox 中的 Firebug，IE 或 Chrome 中的 F12 开发人员工具。在 Firefox 中选择一些 HTML 并右键单击“查看选择源”也可以。
回答by Indranil
The "View Source" only shows the source the server sent at the time the browser requested the particular webpage from the server. Therefore, since these changes were made on the client side, they don't show up on the "View Source" because they've been made after the original page has been delivered.
“查看源代码”仅显示在浏览器从服务器请求特定网页时服务器发送的源代码。因此，由于这些更改是在客户端进行的，因此它们不会显示在“查看源代码”中，因为它们是在原始页面交付后进行的。
To view the live source of the page, you can use the Web Inspector view in webkit browsers, or Firebug in Firefox. These keep track of any changes to the DOM and update the source which you can see.
要查看页面的实时源代码，您可以使用 webkit 浏览器中的 Web Inspector 视图或 Firefox 中的 Firebug。这些跟踪 DOM 的任何更改并更新您可以看到的源。
回答by Prasanth Bendra
There is a option in web developer tool (Firefox addon) "View generated source" which will give you the whole source code which is generated after you made changes.
Web 开发人员工具（Firefox 插件）“ View generated source”中有一个选项，它将为您提供更改后生成的整个源代码。
view source->View generated source
回答by BraveNewMath
There are times when dev tools in IE/Firefox/Chrome don't keep up with your DOM. That just means you are dealing with some code worthy of a jedi - or that Darth Vader left it there for you to debug.
有时 IE/Firefox/Chrome 中的开发工具跟不上您的 DOM。那只是意味着您正在处理一些值得绝地武士的代码 - 或者达斯维达将它留在那里供您调试。
