Setting the id attribute of an input element dynamically in IE: alternative to setAttribute method

Question

I am looking for a dynamic setting of the ID attribute of HTML input elements that are dynamically created in my application.

My implementation works fine with the setAttribute method in Firefox. Any ideas or solutions for a working implementation in IE will be appreciated.

var hiddenInput = document.createElement("input"); hiddenInput.setAttribute("id", "uniqueIdentifier"); hiddenInput.setAttribute("type", "hidden"); hiddenInput.setAttribute("value", ID); hiddenInput.setAttribute("class", "ListItem"); 

I changed some code examples from blogs related to this issue that the following desktop offers. Firefox bit works fine again, but IE bit doens't

 var hiddenInput = null; try { hiddenInput = document.createElement('<input name=\''+"hiddenInputName"+'\' />'); hiddenInput.id = "uniqueIdentifier"; //alert(document.getElementById("uniqueIdentifier")); hiddenInput.type = "hidden"; } catch (e) { } if (!hiddenInput || !hiddenInput.name) { // Not in IE, then var hiddenInput = document.createElement("input"); hiddenInput.setAttribute("id", "uniqueIdentifier"); hiddenInput.setAttribute("type", "hidden"); } 

Greetings.

Answer 1

This code works in IE7 and Chrome:

 var hiddenInput = document.createElement("input"); hiddenInput.setAttribute("id", "uniqueIdentifier"); hiddenInput.setAttribute("type", "hidden"); hiddenInput.setAttribute("value", 'ID'); hiddenInput.setAttribute("class", "ListItem"); $('body').append(hiddenInput); 

Maybe the problem is somewhere else?

Answer 2

Forget setAttribute() : it is severely broken and does not always do what you might expect in old IE (IE <= 8 and compatibility modes in later versions). Use element properties instead. This is usually a good idea, not only for this particular case. Replace your code with the following, which will work in all major browsers:

 var hiddenInput = document.createElement("input"); hiddenInput.id = "uniqueIdentifier"; hiddenInput.type = "hidden"; hiddenInput.value = ID; hiddenInput.className = "ListItem"; 

Update

An unpleasant hack in the second block of code is not needed in the question, and the code above works fine in all major browsers, including IE 6. See http://www.jsfiddle.net/timdown/aEvUT/ . The reason you get null in your alert() is because when it is called, the new input is not yet in the document, so calling document.getElementById() cannot find it.

Answer 3

Use jquery attr method. It works in all browsers.

 var hiddenInput = document.createElement("input"); $(hiddenInput).attr({ 'id':'uniqueIdentifier', 'type': 'hidden', 'value': ID, 'class': 'ListItem' }); 

Or you can use the following code:

 var e = $('<input id = "uniqueIdentifier" type="hidden" value="' + ID + '" class="ListItem" />'); 

Answer 4

I did not know about the problem with setAttribute in IE? However, you can directly set the expando property on the node itself:

 hiddenInput.id = "uniqueIdentifier"; 

Answer 5

The documentation says:

If you need to set attributes that also map to the JavaScript dot property (for example, href, style, src, or event handlers), prefer this mapping.

So just change the id assignment, value , and you have to do it.

Answer 6

I had the same problem! I was unable to change / set the element identifier attribute. It worked in all other browsers, but not in IE. This probably doesn't apply to your problem, but here is what I ended up doing:

Background

I created a MVC tabbed jquery site. I wanted to dynamically create tabs and perform AJAX postback on the server, keeping the tab in the database. I wanted to use a unique identifier in the form of int for tabs, so I would not have to worry if the user created two tabs with the same name. Then I used a unique identifier to identify the tabs, for example:

 <ul> <li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove List</span></li> <ul> 

When I then implemented the delete functions on the tabs, the callback uses the index, witch is 0. Then I had no way to send a unique identifier to the server to destroy the database record. The callback for the tabremove event gives the jquery event and ui parameters. With one line of code, I could get the span id:

 var dbIndex = event.currentTarget.id; 

The problem was that the span tag did not have an identifier. So in the create callback I tried to set the purchase id by extracting the id from href like this:

 ui.tab.parentNode.id = ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6); 

This works fine in FireFox, but not in IE. So I tried a few others:

 //ui.tab.parentNode.setAttribute('id', ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6)); //$(ui.tab.parentNode).attr({'id':ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6)}); //ui.tab.parentNode.id.value = ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6); 

None of them work! So after several hours of testing and Googeling, I gave up and concluded that IE could not set the element identifier attribute dynamically.

I'm sorry this probably doesn't apply to your issue, but I thought I would share.

Decision

And for all of you who found this on google on a tab issue, I had what I ended up doing in the tabsremove callback to solve the problem:

 var dbIndex = event.currentTarget.offsetParent.childNodes[0].href.substring(event.currentTarget.offsetParent.childNodes[0].href.indexOf('#list-') + 6); 

This is probably not the sexiest solution, but he solved the problem. If anyone has any data, please share ...