8

jQuery: v1.7.1
Hello guys,
I changed the img attributes from jQuery Like this:

        $("document").ready(function () {
        $("img").attr({ src: "images/Spring.jpg", alt: "spring" });
    });

Changes are reflected in the browser but,
1) when I checked the "view source code" there were no changes(it was original html) which were changed by the js ,why? Like this:

    <a href="images/Grass.jpg">
    <img src="images/Grass.jpg" alt="image"/> </a>

2) And when I checked from Firebug it showed the changes made by jquery ?

<a href="images/Grass.jpg">
<img alt="spring" src="images/Spring.jpg"> </a>

Whats going on here ?
Q) Are the changes made to DOM done in memory ? and How can firebug show it ?

DayTimeCoder
  • 4,294
  • 5
  • 38
  • 61
  • 6
    The original HTML (what you get with "view source") is never changed, only the DOM which is created from the HTML (and that's what Firebug shows). – Felix Kling Mar 11 '12 at 12:04
  • possible duplicate of [jQuery DOM changes not appearing in view source](http://stackoverflow.com/questions/8598836/jquery-dom-changes-not-appearing-in-view-source) – Felix Kling Mar 11 '12 at 12:05
  • *related*: [Differences: View Page Source vs. View in Firebug](http://stackoverflow.com/questions/4396462/differences-view-page-source-vs-view-in-firebug) – Felix Kling Mar 11 '12 at 12:06

2 Answers2

14

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.

Ben Lee
  • 52,489
  • 13
  • 125
  • 145
  • Q) Are the changes made to DOM done in memory ? and How can firebug show it ? – DayTimeCoder Mar 11 '12 at 12:12
  • 2
    @dotNetSoldier, yes the DOM is stored in memory. And firebug interfaces directly with the DOM. – Ben Lee Mar 11 '12 at 12:13
  • Great thanks for the input, Can you refer any solid book on concepts of html ,javacript and DOM not just any "html tags" book – DayTimeCoder Mar 11 '12 at 12:25
  • 1
    @dotNetSoldier, sorry, I've never read any books about that sort of thing, so I don't know of any good ones. Most of this stuff is adequately explained online. – Ben Lee Mar 11 '12 at 12:27
3

Any way, it is also possible to see current state of your DOM. you can select all, through CTRL+A and then right-click go for View Selection Source!!

Gholamreza Fathpour
  • 157
  • 1
  • 4