Why would html source not change when the DOM is updated dynamically
browser, dom, html, javascript, jquery
Solution
The view source is the source downloaded to the browser. What happens in memory doesn't get updated in the source.
Problem
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 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 ?