Unobtrusive javascript rendered

Question

In the wikipedia entry Unobtrusive JavaScript there is an example of obtrusive JavaScript:

<input type="text" name="date" onchange="validateDate(this);" />

The solution is the following:

<input type="text" name="date" />

window.onload = function(){ //Wait for the page to load.
    var inputs = document.getElementsByTagName('input');
    for(var i=0,l=inputs.length;i<l;i++){ 
        input = inputs[i];
        if(input.name && input.name=='date'){ 
            input.onchange = function(){ 
                validateDate();
            }
        }
    }
};

function validateDate(){
 //Do something when the content of the 'input' element with the name 'date' is changed.
}

Is there a way to generate the first code sample from the second? In other words, is it possible to "render" the HTML of a page after JavaScript has acted on it?

Answer 1

JavaScript can be used to render HTML (add elements to the DOM) and this is essentially what the solution does. However if you view the source of the page after the onchange event has been added you won't see it - this is because browsers show the unaltered DOM only.

If you want to browse the updated DOM then download Firebug for Firefox. I can't recommend this tool enough!