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

Answer 1

The original source never changes. Only the DOM changes.

You can see an HTML visualization of DOM changes using your browser's developer tools.

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.

Answer 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.

Answer 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.

Answer 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.

view source->View generated source