In My Experience... | Is the setAttribute() method broken in IE? (19485)

Tree and Sunset. « prev
The waiting is the hardest part. » next

Is the setAttribute() method broken in IE?
[ Posted by Dan on August 05, 2003 | 16 Comments ]

In a recent bit of development work, we discovered the beauty and pain of the setAttribute() method. Specifically, we wanted to dynamically create more form elements for people to fill out without having to go back to the server and add in the HTML. So, we do a createlement() and then add in the various attributes that make up an input box. Here's the basics...

  var input = document.createElement("INPUT");

  input.setAttribute("type","text");
  input.setAttribute("name","myinput");
  input.setAttribute("id","myinput");

That makes a new input element, and then sets all of the attributes and their values. The result should be something like this...

  <input type="text" name="myinput" id="myinput">

You can try that code right here... When you click on "Add an Input" some more complex JavaScript than quoted above will execute, and if you are using Navigator, Safari or Mozilla, you will get a new input with all if its necessary attributes defined and populated. The innerHTML will be alerted so you can verify that. Try it, and then view the page source to see what the code is doing.

Notice that I used the word "should" in the my comments above. I say the 's' word for a couple of reasons. Internet Explorer 6 on Win 2k Pro doesn't set any of the attributes. And Internet Explorer 5.2.3 for Mac OSX does something even worse, it throws a JavaScript error on the attempt to set the type attribute. Scouring the net for answers yielded frustrating results.

One particularly delicious find mentions that the Microsoft Developer site provides code that doesn't execute. When I run the code at that link, I get an error at the attempt to set the type attribute. The MSDN even talks about the method as if it were fully supported, but I'm not so sure about that. The only working example I could find seems to be completely IE/Windows specific and mentions that "his method requires an object participating in persistence".

My conclusion is that the setAttribute method is not fully supported in Internet Explorer. So, we resorted to workarounds, and found one. If you do a createElement("SPAN") and then pump it full of innerHTML and then append that to something, you will get your desired effect. But, that's at the price of using non-DOM code.

If anyone else can shed any more light on this, please do. My knowledge on the subject is anecdotal and derived from experimentation. Other data includes weird comments like the following from O'Reilly...

"The book says that the setAttribute() method in IE4 through 5.5 uses propertynames instead of attributenames. I experienced that the same behaviour holds for IE6.0 for PC."

Again, please let me know if you know anything that hasn't been mentioned here already.

If you look at the definition of the INPUT element in MSDN, it defines what the properties are, versus what the attributes are - http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/input_text.asp

After some experimentation, I found that if you call getAttribute('name') on that object you created, the name attribute will be there! It just doesn't show up in the innerHTML property. If you call your attribute 'NAME' instead of 'name', it will show up in innerHTML - *shrug*

So I would think that this shows up major issues with IE's innerHTML handling :-) Hope that I'm not completely wrong here, and that it's of help to you.

-Posted by Gary Coady on August 5, 2003 08:20 PM

I do this with ECMAScript and DOM; how well this works with IE (for Mac?) I don't know.

var oOption = document.createElement("option");

parentelement.appendChild(oOption);
oOption.text="sometext";
oOption.value="somevalue";

I found that it's necessary to append the newly created element to the parent element, then set the values. Of course, someone is probably going to tell me that this is not correct DOM scripting.

-Posted by Henry Blackman on August 6, 2003 12:48 PM

Well Henry, I won't tell you it's wrong, but I will say that contradicts what MSDN says about the issue...

As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.

So, I tried using the suggestion of using the property name instead of the attributename and set the call to set the type in capital letters. Thus, the line looks like this...

input.setAttribute("TYPE","text");

The fun part here is that the type now shows up twice in the reported innerHTML.

If I set the value of TYPe to checkbox, I still get a text input because the type="text" gets set as a default, and is not overridden by me call to make it a chackbox. And I'm doing this before "an input element is created with the createElement method and before it is added to the document" as MSDN suggests. No glory.

Also, fwiw, I attempted to clone the attribute node of another existing input who's type is text, and that didn't work either (but I forget what happened, because I tried that last week, and I'm too lazy to set it up again right now).

AFAICT, the only cross platform solution that uses the same executed code that results in a dynamically generated input is making a string and pumping that in as innerHTML. sigh

-Posted by Dan on August 6, 2003 01:02 PM

http://developer.apple.com/internet/javascript/jstests.html

I found that link to be interesting; in particular, the bit about IE not supporitng setAttribute if using 'type'. Seems like th eMac can only default to creating text fields according to this article.

Care to share a bit about how you manipulated that span tag? Like, maybe a bit of sample code?

thanks,

john

-Posted by John on August 14, 2003 11:25 AM

I'm having the same problem with IE6.0, Mozilla is working fine.

I'm creating some checkboxes on the fly. The show up in the page but I can't change the value or checked status ot that created checkbox element.

--
var td = document.getElementById('subgroup_td');
var checkbox = document.createElement('input');

checkbox.setAttribute('value',"TEST");
checkbox.setAttribute('name','Subgroups');
checkbox.setAttribute('type','checkbox');
td.appendChild(checkbox);
--

When I submit the form the value for all selected Subgroups is "on", according to MS that's the default value.

Mozilla is showing the correct selected values.

-Posted by John Grinwis on October 22, 2003 02:45 PM

Seems I am having the same issue(s) with setting attributes to 'div'. I've seen the duplication Dan mentioned as well.
The non-DOM solution of pumping to innerHTML won't work for me as Moz/NS won't trigger events on these elements.

...and I hear is how great IE works and the all the bugs in Moz/NS. Personally, I don't know how coders work with IE. Debugging in IE is trial and error (most errors = code stops executing).

Thanks for making feel I'm not alone. :-)

-Posted by Clif on October 25, 2003 08:54 PM

The duplication could be because of the third element in setattribute.. make sure youre setting that to 0 as its 1 as default.
and when set as 1 it will create a new attribute if the case doesnt match perfectly the current attr.
i dunno if thats your problem here. but i got fooled with that for a while! ;)

-Posted by jim on February 22, 2004 08:21 AM

I faced this problem and the only solution that I have found so far that works is the hack.

Did anyone actually get it to work on IE with straightforward code (i.e. without a hack) ?

-Posted by Jack on March 28, 2004 02:55 AM

Sorry about above:

Should have read 'SPAN hack'.

-Posted by Jack on March 28, 2004 02:56 AM

Not a solution to the setAttribute problem - but this works. If you say

document.createElement("");

and then append it - it works perfectly on IE 6. Of course, it will NOT work on Netscape (haven't even tried on any other browser). This was from a Microsoft site example - sorry am not able to provide the link.

-Posted by Manju on March 30, 2004 04:14 PM

uh oh, my html got eaten up - sorry 'bout that. What I meant was within the createElement quotes:

input type='text' name='somename' value='some value'

-Posted by Manju on March 30, 2004 04:20 PM

Hi,

here is a possible workaround that works both for IE6 and Mozilla (1.5):

//define a new function to set nodes' attributes
function setAttribute(node, name, value) {
var i;
for (i = 0; i {
if (node.attributes[i].name == name)
{
node.attributes[i].value = value;
}
}
}

-Posted by Pietro on May 4, 2004 10:57 AM

Thank's, Very usefull.

-Posted by Eric on May 19, 2004 04:57 PM

I'm experiencing al lot of trouble with IE (6) and the setAttribute function as well. I'm writing a bit of cross-browser code and I wanted to use the setAttribute function to change the CSS class of a html tag.

In Mozilla Firefox, this works:
...
rowCells[i].setAttribute("class", "cssClassTag");
...

However, in IE (6), this is the way to do it:
...
rowCells[i].setAttribute("className", "cssClassTag");
...

A bit weird in my opinion, but it works. It cost me quite a lot of time to trace the problem; I hope this saves you guys some precious time...!

-Posted by alpha on June 9, 2004 04:29 AM

I'm trying to create a form that includes an IFrame with form elements inside of it. The optimal solution for me is to add hidden input elements to the mainform, create a namespaced name for the hidden element and copy the value over from the Iframe's form into the main page's form right before the submit happens. This works very well on every browser that I have available to me (firefox on windows, linux and mac; ie on win98 and winXP; safari, camino, etc), but doesn't work on IE for the mac. I tried using this

hack to no avail. Well, I'm guessing that IE on the mac actually adds the innerHTML to the span element, but that input Tag isn't getting submitted along with the form. Any new ideas about how to get IE on the mac to create a form element that will be submitted along with the form?

-Posted by Mark on June 17, 2004 11:39 AM

For IE6, in place of using setAttribute() on an existing document element, just create a new element, access the attributes using this syntax: element.attribute = "value";

Here was my implementation:

//instance new field element
var new_field = document.createElement("input")
//set properties, attributes
new_field.type = "password" ;
new_field.id = "id_name";
new_field.size = 25;
new_field.maxlength = 25;
// fetch and replace on object d, the element's container
d.appendChild(new_field);
d.removeChild(d.firstChild);

-Posted by Brian Duchek on September 13, 2004 02:46 PM

Comment posting has been turned off because I don't have enough time and will to deal with the constant comment spamming. I'm very sorry and will fix this sometime soon (soon = before 2004 ends).