"Динамическое задание атрибута id элемента input в IE: альтернатива методу setAttribute"

Question

Я пытаюсь динамически задать атрибут ID для HTML-элементов ввода, которые создаются динамически в моем приложении.

Моя реализация работает корректно с методом setAttribute в Firefox. Буду признателен за любые идеи или решения, которые помогут сделать эту реализацию работающей в Internet Explorer.

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('&lt;input name=\'' + "hiddenInputName" + '\'   /&gt;');
    hiddenInput.id = "uniqueIdentifier";
    //alert(document.getElementById("uniqueIdentifier")); 
    hiddenInput.type = "hidden";
} catch (e) { }            

if (!hiddenInput || !hiddenInput.name) { // Если не в IE
    var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     
}

Спасибо!

Answer 1

Если вы испытываете проблемы с использованием метода setAttribute(), особенно в старых версиях Internet Explorer (IE ⇐ 8 и режиме совместимости в более поздних версиях), лучше использовать свойства элемента напрямую. Это общее правило, которое хорошо работает не только в данном случае.

Замените свой код следующим образом, который будет корректно работать во всех основных браузерах:

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

Обновление

Косяк, упомянутый во втором блоке кода в вопросе, не нужен. Код, приведенный выше, отлично работает во всех современных браузерах, включая IE 6. Обратите внимание, что получение null в вашем alert() происходит из-за того, что при его вызове новый элемент input еще не добавлен в документ, и поэтому вызов document.getElementById() не может его найти.

Answer 2

Я не знал о проблеме с setAttribute в IE. Тем не менее, вы можете прямо установить свойство expando на самом узле:

hiddenInput.id = "uniqueIdentifier";

"Динамическое задание атрибута id элемента input в IE: альтернатива методу setAttribute"

2 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных