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:.html
FF3.5-View page Source:
<html>
<head>
<script src='.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 ?
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/readonly.html
FF3.5-View page Source:
<html>
<head>
<script src='http://ajax.googleapis./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 ?
Share Improve this question edited Aug 30, 2020 at 20:22 HoldOffHunger 20.9k11 gold badges120 silver badges146 bronze badges asked Mar 8, 2010 at 20:23 ramram 11.6k16 gold badges67 silver badges89 bronze badges2 Answers
Reset to default 15The view source is the source downloaded to the browser. What happens in memory doesn't get updated in the source.
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.