setting the id attribute of an input element dynamically in IE: alternative for setAttribute method

I'm looking at dynamically setting the ID attribute of HTML Input elements which are created dynamically in my application.

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

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

I modified some sample code from blogs relating to this problem that suggest the following workround. Again the Firefox bit works well but the 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");                     

            }

Cheers.

Solution 1:

This code work 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 problem somewhere else ?

Solution 2:

Forget setAttribute(): it's badly broken and doesn't always do what you might expect in old IE (IE <= 8 and compatibility modes in later versions). Use the element's properties instead. This is generally a good idea, not just 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

The nasty hack in the second code block in the question is unnecessary, and the code above works fine in all major browsers, including IE 6. See http://www.jsfiddle.net/timdown/aEvUT/. The reason why you get null in your alert() is that when it is called, the new input is not yet in the document, hence the document.getElementById() call cannot find it.