在 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 方法的替代方法