在IE中dynamic设置input元素的id属性：setAttribute方法的替代方法

我正在寻找dynamic设置在我的应用程序中dynamic创build的HTML Input元素的ID属性。

我的实现可以在Firefox中使用setAttribute方法。 任何想法或解决scheme在IE中的工作实现将不胜感激。

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

我修改了一些与这个问题有关的博客示例代码，这些代码提示了下面的工作。 再次，Firefox的位运作良好，但IE位不行

 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"); } 

干杯。

Answer 1

此代码在IE7和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); 

也许问题在别的地方？

Answer 2

忘记setAttribute() ：它被严重破坏，并不总是做你可能期望在旧的IE浏览器（IE <= 8和在以后的版本兼容模式）。 改用元素的属性。 这通常是一个好主意，而不仅仅是这个特定的情况。 将下面的代码replace成适用于所有主stream浏览器的代码：

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

更新

在问题中的第二个代码块的讨厌的黑客是不必要的，上面的代码在所有主要的浏览器，包括IE 6中工作正常。请参阅http://www.jsfiddle.net/timdown/aEvUT/ 。 您在alert()为null的原因是，当它被调用时，新的input还没有在文档中，因此document.getElementById()调用找不到它。

Answer 3

使用jquery attr方法。 它适用于所有浏览器。

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

或者你可以使用以下代码：

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

Answer 4

我没有意识到在IE中setAttribute的问题？ 但是，您可以直接在节点本身上设置expando属性：

 hiddenInput.id = "uniqueIdentifier"; 

Answer 5

该文件说：

当您需要设置也映射到JavaScript点属性的属性（如href，style，src或event-handlers）时，请改为使用该映射。

所以，只要改变ID ， 值的分配，你应该完成。

Answer 6

我遇到过同样的问题！ 我无法更改/设置元素的ID属性。 它在所有其他浏览器，但不是IE。 这可能与你的问题没有关系，但这是我最终做的：

背景

我正在用jQuery选项卡build立一个MVC网站。 我想dynamic创build选项卡，并执行一个AJAX回发到服务器保存数据库中的选项卡。 我想为标签使用一个唯一的标识符，以intforms，所以如果用户创build了两个具有相同名称的标签，我不会麻烦。 然后我使用唯一的ID来标识标签，如：

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

当我然后在选项卡上实现删除function时，callback使用索引，女巫是基于0。 然后，我没有办法将唯一的ID发回到服务器来垃圾数据库条目。 tabremove事件的callback给出了jquery事件和UI参数。 用一行代码我可以得到跨度的ID：

 var dbIndex = event.currentTarget.id; 

问题是span标签没有任何ID。 所以在创buildcallback，我试图设置ID购买从一个像这样的HREF提取ID：

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

在FireFox中工作正常，但在IE中没有。 所以我尝试了其他一些：

 //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); 

他们没有工作！ 所以经过几个小时的testing和Googeling，我放弃了，得出IE不能dynamic设置元素的ID属性的结论。

我很伤心，这可能与你的问题不相关，但我想我会分享。

解

而对于所有在Google上发现这个问题的人，我在这里都是在tabsremovecallback中解决问题的结果：

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

可能不是最性感的解决scheme，但嘿它解决了这个问题。 如果有人有任何意见，请分享…