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

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

请高手,让我知道原因。谢谢

5 个解决方案

#1

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 interpretation of the current state of the DOM. There's no actual modification of HTML markup.

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

#2

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开发者工具。选择一些HTML并在Firefox中右键单击“查看选择源”也可以。

#3

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的任何更改并更新您可以看到的源。

#4

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 source->View generated source

#5

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。这只是意味着你正在处理一些值得jedi的代码 - 或者Darth Vader将它留在那里供你调试。

#1