Content of html page changed by jQuery but “View Source” don’t reflect the changes

by

The source code never changes. When you “view source” that just shows you exactly what the browser received from the server.

It is the DOM (Document Object Model) that you are manipulating, not the HTML.

The initial DOM state is a representation of the source HTML, but it is not permanently linked with the source HTML. Javascript changes the DOM but not the HTML. See here for a full explanation of the DOM: http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

The Document Object Model (DOM) is an application programming
interface (API) for valid HTML and well-formed XML documents. It
defines the logical structure of documents and the way a document is
accessed and manipulated.

And a relevant quote from the page under the heading “What the DOM is not”:

The Document Object Model is not a way of persisting objects to XML or
HTML. Instead of specifying how objects may be represented in XML, the
DOM specifies how XML and HTML documents are represented as objects,
so that they may be used in object oriented programs.

Firebug (and other developer tool frameworks), similarly, show you the current state of the DOM (because that’s what is dynamic). That’s why see the change in Firebug, but not in the source code view.

More Related Contents:

  1. What is wrong with this basic Javascript code? [closed]
  2. Get the longest text in HTML document using Jquery or javascript
  3. jQuery Mobile: document ready vs. page events
  4. How can I get the data-id attribute?
  5. jQuery Mobile: Markup Enhancement of dynamically added content
  6. How to move an element into another element?
  7. How to submit an HTML form without redirection
  8. Is there a DOM event that fires when an HTML select element is closed?
  9. jQuery: Get selected element tag name
  10. How do I remove tinyMCE and then re-add it?
  11. How to read xml file contents in jQuery and display in html elements?
  12. Attach an event in a child iframe to a handler in the parent window
  13. jQuery click anywhere in the page except on 1 div
  14. HTML anchor link – href and onclick both?
  15. How to ONLY trigger parent click event when a child is clicked
  16. How can I detect when a new element has been added to the document in jquery?
  17. JavaScript Loading Screen while page loads
  18. jQuery: trigger a hover event from another element
  19. Change text color based on brightness of the covered background area?
  20. jQuery – Sticky header that shrinks when scrolling down
  21. jQuery text() and newlines
  22. How to use jQuery’s drop event to upload files dragged from the desktop?
  23. call the same jQuery function in multiple buttons
  24. Detect added element to DOM with Mutation Observer
  25. html() vs innerHTML jquery/javascript & XSS attacks
  26. How can I make an image carousel with only CSS?
  27. How to call a function after a div is ready?
  28. How to convert selected HTML to Json?
  29. Geolocation closest location(lat, long) from my position
  30. How can I reorder elements with JavaScript?

Leave a Comment