DOM setAttribute() is different in M$ IE "the crappy"

Last days, I was working on a pure heavy (JavaScript/Ajax) component.
The component was required to run correctly across different browsers.
I really did the job in few hours but after start testing the component, I found it works fine on both FF and Opera but as usual I found the M$ IE complaining. I really found alot of IE weird things.

For example, if we try the following code in FF or even Opera, it would work fine.

<html>

<div id="myDiv">
</div>

<input value="Add New Element to div" type="button"
onclick="createNewElement();" />

<script>
function createNewElement() {
   var parentDiv = document.getElementById("myDiv");
   var buttonElement = document.createElement("input");

   buttonElement.setAttribute("type", "button");
   buttonElement.setAttribute("id", "myButton");
   buttonElement.setAttribute("value", "New Button");
   buttonElement.setAttribute("onMouseDown", "alert('Hi');");

   parentDiv.appendChild(buttonElement);
}
</script>

</html>

The “New Button” button would be created if we click on the “Add New Element to div” button.
The 'Hi' message would appear also if we click on the “New Button” button. Here is the output :



But if we try to run the previous code on the M$ IE, we will find the code written under the “onMouseDown” doesn't work.
After spending some time in investigation, I found that the M$ crappy browser doesn't support setAttribute onEventXXX.
Here is the IE output (Nothing is done after clicking on the “New Button” button :





Finally after spending some time with the ugly IE, I could fix this problem by doing the following:

// The IE Fix.
buttonElement.onmousedown = function() {
     alert("Hi - Fixed on the crappy IE");
};
This entry was posted in JavaScript, Web 2.0 and tagged , , , , by hazems. Bookmark the permalink.

About hazems

Hazem Saleh has more than eleven years of experience in Cloud, Mobile and Open Source technologies. He worked as a software engineer, technical leader, application architect, and technical consultant for many clients around the world. He is an Apache PMC (Project Management Committee) member and a person who spent many years of his life writing open source software. Beside being the author of the "JavaScript Unit Testing" book, "JavaScript Mobile Application Development" book, "Pro JSF and HTML5" book and the co-author of the "Definitive guide to Apache MyFaces" book, Hazem is also an author of many technical articles, a developerWorks contributing author and a technical speaker in both local and international conferences such as ApacheCon North America, Geecon, JavaLand, JSFDays, CON-FESS Vienna and JavaOne. Hazem is an XIBMer, he worked in IBM for ten years. Now, He is working for Nickelodeon New York as a Mobile Architect. He is also an OpenGroup Master Certified Specialist.