19

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

2
  • Use firebug instead..
    – Jishnu A P
    Dec 22, 2011 at 2:35
  • Thanks, firebug is awesone. Thanks everybody for the good answers
    – user765368
    Dec 22, 2011 at 2:48

5 Answers 5

28

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.

2
  • 6
    +1 but what about roobots of search engins like Google? Is this content which I for example load via ajax GET from some rest api visible?
    – andilabs
    Dec 5, 2013 at 22:22
  • this is my question too? how? @andi
    – Sajjad.HS
    Jun 18, 2017 at 18:58
7

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.

5

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.

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
0

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.

2
  • 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…
    – ptim
    Apr 11, 2014 at 6:16
  • I get this behavior when javascript is dynamically injected into the page as part of an ajax payload. Apr 21, 2014 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.