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

干杯。

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

也许问题在别的地方?

忘记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()调用找不到它。

使用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" />'); 

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

 hiddenInput.id = "uniqueIdentifier"; 

该文件说:

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

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

我遇到过同样的问题! 我无法更改/设置元素的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,但嘿它解决了这个问题。 如果有人有任何意见,请分享…