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

Question

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   lt input name      hiddenInputName          gt                         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

User · Answer

Forget setAttribute    it s badly broken and doesn t always do what you might expect in old IE  IE  lt   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

User · Answer

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 could use folowing code   var e       lt input id    uniqueIdentifier  type  hidden  value      ID      class  ListItem    gt

User · Answer

The documentation says      When you need to set attributes that are also mapped to a JavaScript dot-property  such as href  style  src or event-handlers   favour that mapping instead    So  just change id  value assignment and you should be done

User · Answer

I wasn t aware of a problem with setAttribute in IE   However you could directly set the expando property on the node itself   hiddenInput id    uniqueIdentifier

User · Answer

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

User · Answer

I had the same issue  I was unable to change set the ID attribute of elements  It worked in all other browsers but not IE  It probably isn t relevant to your problem but here is what I ended up doing   Background  I was building an MVC site with jquery tabs  I wanted to create tabs dynamically and do an AJAX postback to the server saving the tab in the database  I wanted to use a unique identifier  in the form of an int  for the tabs so I wouldn t get in to trouble if a user created two tabs with the same name  I then used the unique ID to identify the tabs like    lt ul gt   lt li gt  lt a href    href   gt   label  lt  a gt   lt span class  ui-icon ui-icon-close  gt Remove List lt  span gt  lt  li gt   lt ul gt    When I then implemented the remove functions on the tabs the callback uses the index  witch is 0 based  Then I had no way to sending back the unique ID to the server to trash the DB entry  The callback for the tabremove event gives the jquery event and ui parameters  With one line of code I could get the ID of the span   var dbIndex   event currentTarget id    The problem was that the span tag didn t have any ID  So in the create callback I tried to set the ID buy extracting the ID from the a href like this   ui tab parentNode id   ui tab href substring ui tab href indexOf   list-     6     That worked fine in FireFox but not in IE  So I tried a few other     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 worked  So after a few hours of test and Googeling I gave up and draw the conclusion that IE cant set the ID attribute of an element dynamically    As I sad this is probably not relevant to your issue but I thought I would share   Solution  And for all of you who found this by Googleing on the tabs issue I had here is what I ended up doing in the tabsremove callback to solve the issue   var dbIndex   event currentTarget offsetParent childNodes 0  href substring event currentTarget offsetParent childNodes 0  href indexOf   list-     6     Probably not the sexiest solution but hey it solved the issue  If anyone have any input please share

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

Examples related to javascript

Examples related to html

Examples related to dom