在 IE 中动态设置输入元素的 id 属性：setAttribute 方法的替代方法

问题描述

我正在查看动态设置在我的应用程序中动态创建的 HTML Input 元素的 ID 属性。

我的实现在 Firefox 中使用 setAttribute 方法正常工作。对 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");                     

            }

干杯。

最佳解决方案

这个 code 在 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 和兼容性模式在以后的版本) 。改用元素的属性。这通常是一个好主意，不仅仅是为了这个特殊情况。将您的代码替换为以下内容，这将适用于所有主流浏览器：

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 的原因是当它被调用时，新输入尚未在文档中，因此 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";

第五种方案

documentation 说：

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.

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

第六种方案

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

背景

我正在使用 jquery 选项卡构建一个 MVC 站点。我想动态创建选项卡，并对服务器执行 AJAX 回发，保存数据库中的选项卡。我想为标签使用一个 int 形式的唯一标识符，所以如果用户创建了两个具有相同名称的选项卡，我将不会遇到麻烦。然后，我使用唯一的 ID 来标识如下所示的选项卡：

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

当我在选项卡上实现删除功能时，回调使用索引，witch 为 0 。那么我无法将唯一的 ID 发送到服务器来垃圾 DB 条目。 tabremove 事件的回调给出了 jquery 事件和 ui 参数。使用一行代码，我可以得到跨度的 ID：

var dbIndex = event.currentTarget.id;

问题是 span 标签没有任何 ID 。所以在创建回调我试图设置 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);

他们都没有工作！所以经过几个小时的测试，Googeling 我放弃了并且得出结论，IE 不能动态地设置元素的 ID 属性。

我很伤心，这可能与你的问题无关，但我以为我会分享。

解

对于所有通过 Googleing 发现这个问题的人，我在这里的标签问题是我最终在 tabsremove 回调中解决问题的方法：

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

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

参考文献

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

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

在 IE 中动态设置输入元素的 id 属性：setAttribute 方法的替代方法