jQuery DOM changes not appearing in view source

Question

I have a simple question here. I know with jQuery you can dynamically append HTML elements in the DOM by doing stuff like

$('').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

Solution 1

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.

Solution 2

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.

Solution 3

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.

view source->View generated source

Comments

[ptim]

Like when? I'm updating a form select with jquery.chosen, and don't see the original html changing in Chrome devtools, though if I inspect the element $('.my-select') in the console, I see that the current value is accurate…

[BraveNewMath]

I get this behavior when javascript is dynamically injected into the page as part of an ajax payload.