HTML changes with element.setAttribute("onclick","alert('Test');") and element.onclick = "alert('Test');";

Question

I got surprised when comparing the following cases:

button = document.getElementById("addSugerenciaButton");

if (button != null) {
   button.onclick = "post_to_url('" + addSugerenciaURL + "', idBuzon', '" + id + "');";
}

button = document.getElementById("removeBuzonButton");

if (button != null) {
    button.onclick = function() {
        if (!confirm(removeSugerenciaMessage)) {
            return false; 
        };
        post_to_url(removeBuzonURL, 'idBuzon', id);
    };
}

button = document.getElementById("editBuzonButton");

if (button != null) {
    button.setAttribute("onclick","post_to_url('" + editBuzonURL + "', 'idBuzon', '" + id + "');");
}

Just the latter appeared to change the HTML (at least inspecting with Firebug) whilst the rest, although working properly too, they didn't show any onclick event in the editBuzonButton element.

Any ideas why this is happening?

Answer 1

Yes. setAttribute adds an attribute to an Element DOM node. For the onclick attribute, there is a side effect under the covers of also adding an onclick event handler, which is made by 'compiling' the attribute value into a javascript function.

Assigning a function to the onclick property of the element directly does attach the handler, but does not automatically add an attribute to the DOM node.

Now it is possible that there are browsers that do not make the distinction between adding the attribute and attaching the handler directy. But keep in mind that although modifying the document may create scriptable objects as side effect, the reverse does not have to be the case: programmatically creating DOM structures may or may not change the HTML underlying the document according to the browser you happen to be using.