Question

I wanted to make a button with the following JavaScript…

var button = document.createElement('button');
button.type = 'button';
button.appendChild(document.createTextNode('I am button'));
document.body.appendChild(button);

It works great, except in IE7/8 (all I have tested so far).

Message: Object doesn't support this action
Line: 185
Char: 9
Code: 0
URI: http://example.com/widget.js

I found a workaround…

document.body.innerHTML = '<button type="button">I am button</button>';

That is, set innerHTML and let the browser do the parsing.

jsFiddle.

Is there any other way to get this to work in IE without setting the innerHTML property?

Answer 1

According to this article which you might have seen, the direct createElement DOM call in IE7/8 does not work with the button element, but it does work with input.

You may be right about innerHTML solutions (and the use of jQuery with HTML source, which is in spirit pretty much the same thing, IMHO) being the only approach.

Very strange about the DOM deficiency in IE7/8. Very interesting find!