Question

我正在考虑动态设置在我的应用程序中动态创建的HTML输入元素的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");

我修改了与此问题相关的博客中的一些示例代码，这些代码提示以下workround。 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

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

在其他地方可能有问题吗？

Answer 2

忘记setAttribute()：它被严重破坏，并不总是在旧的IE中做你所期望的（IE＆lt; = 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/。您在null中获得alert()的原因是，在调用时，新输入尚未包含在文档中，因此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

documentation说：

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

所以，只需更改 ID ，值分配即可完成。

Answer 6

我有同样的问题！我无法更改/设置元素的ID属性。它适用于所有其他浏览器，但不适用于IE。它可能与您的问题无关，但这是我最终做的事情：

<强>背景

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

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

当我在选项卡上实现删除函数时，回调使用索引，该函数基于0。然后我无法将唯一ID发送回服务器以丢弃数据库条目。 tabremove事件的回调给出了jquery事件和ui参数。使用一行代码我可以获得跨度的ID：

var dbIndex = event.currentTarget.id;

问题是span标签没有任何ID。所以在创建回调中，我试图设置ID buy从像这样的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属性的结论。

我很难过，这可能与你的问题无关，但我想我会分享。

<强>解决方案

对于所有通过Google阅读标签问题找到此问题的人，我在这里是我最终在tabsremove回调中做的事情来解决问题：

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

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

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

6 个答案: