Jquery Dom Changes Not Appearing in View Source

jQuery DOM changes not appearing in view source

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.

Content of html page changed by jQuery but View Source don't reflect the changes

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.

Change meta Tag with Jquery - Cant see it in view sourcecode

Viewing the source code in the browser shows the HTML as it was downloaded from the server.

To see amendments you have made to the DOM after the page has loaded, you need to use a DOM inspector, usually available by pressing F12.

Element is not in source code at runtime

JavaScript operates on the in-memory DOM, not the original source code to the page.

Use a DOM inspector to see a representation of the modified DOM.

createElement() not showing up in view source

View source only shows what comes back with the initial http request to the server but it doesn't show the dynamics elements added later.

To those dynamics elements after the initial page load in chrome or other browsers you need to inspect the DOM using the developer toolbar. (In Chrome press F12)

Binded list is not showing in html view source in knockout.js?

The source code displayed is whatever the server returns for the client when the page is requested -- you are actually making DOM manipulations which won't modify the original source. What you can do is to check the DOM's current state with a developer tool like Firebug or move the logic to the server side which will return the generated HTML.

jQuery DOM changes not appearing in view source

createElement() not showing up in view source

Why would html source not change when the DOM is updated dynamically

The view source is the source downloaded to the browser. What happens in memory doesn't get updated in the source.

---

Related Topics