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

问题

I had posted one question earlier jQuery inconsistency in setting readonly attribute in IE-8 and FF-3.5.8 and was quite happy with the answer.

But I did notice that if you update (any??) DOM elements dynamically, then view source (using browser's view source) I find the the updated DOM element attribute retains its older value(before update). However, if you use Firebug/IE Developer toolbar, it displays the updated DOM

Example:http://gutfullofbeer.net/readonly.html

FF3.5-View page Source:

<html>
  <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
    <script>
      $(function() {
        $('input.readonly').attr('readonly', true);//set input with CSS class readonly to readonly
      });
    </script>
  </head>
  <body>
    <input type='text' class='readonly' maxlength='20' value='Blort'>This one is read-only<br>
    <input type='text' maxlength='20' value='Fish'>This one is not read-only<br>

  </body>
</html>

Here the first text box is set to readonly in jQuery's document.ready method. Viewing the source with browser would give a markup like

<input type='text' class='readonly' maxlength='20' value='Blort'>

and Firebug will give something like

<input type="text" value="Blort" maxlength="20" class="readonly" readonly="">

IE8 Developer toolbar:

<input class="readonly" type="text" maxLength="20" readOnly="readonly" value="Blort"/>

So my guess is that the browser (IE8/FF3.5) generates the html source much earlier before DOM events kick in (in my case it is jQuery's document.ready() )

Can someone tell me whats happening behind the scene ?

回答1:

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

回答2:

Several browsers have DOM inspectors, for example, Safari 4.0 has a great DOM browser that helps you view dynamically generated elements and their CSS styles dynamically.

来源：https://stackoverflow.com/questions/2404472/why-would-html-source-not-change-when-the-dom-is-updated-dynamically

标签

javascript

jquery

html

dom

browser