Ошибка настройки имени созданного DOM элемента в IE - обходной путь?

Question

я немного трудно этим сегодня:

function mk_input(name, val) { 
    var inp = document.createElement('input'); 
    inp.name = name; 
    inp.value = val; 
    inp.type = 'hidden'; 

    return inp; 
} 

Как выясняется, установка name элемента, созданного с помощью createElement не работает в IE. Это не приводит к ошибке или чему-либо еще, она просто терпит неудачу, заставляя задуматься, почему их скрытые поля неправильно заполняются.

Насколько я могу судить, нет обходного пути. Вам нужно просто укусить пулю и создать тег <input> с помощью строковых манипуляций и вставить его с помощью .innerHTML.

Есть ли лучший способ? Возможно, с чем-то вроде jQuery? Я сделал быстрый поиск и не нашел ничего похожего на createElement в JQuery, но, возможно, я что-то пропустил.

Answer 1

Просто повторно итерацию проблему: в IE, программно установки атрибута на элемент, созданный с помощью document.createElement('input')name не отражается в getElementsByName, form.elements (если добавление к форме), и не отправляется с form (опять же, если добавить к форме) [Reference].

Вот обходной путь я использовал в прошлом (адаптированный к вашему вопросу from here):

function mk_input(name, val) { 
    var inp; 
    try { 
     inp = document.createElement('<input type="hidden" name="' + name + '" />'); 
    } catch(e) { 
     inp = document.createElement("input"); 
     inp.type = "hidden"; 
     inp.name = name; 
    } 
    inp.value = val; 
    return inp 
} 

Это сродни с функцией обнаружения (в отличие от обнаружения браузера). Первый createElement преуспеет в IE, в то время как последний преуспеет в стандартизованных браузерах.

И конечно эквивалент JQuery, поскольку вы помечено вопрос как таковой:

function mk_input(name, val) { 
    return $('<input type="hidden" name="' + name + '" />') 
     .val(val) 
     .get(0) 
} 

(как заметка на полях, под капотом JQuery делает то, что вы описали в своем вопросе: он создает фиктивную <div> и наборы его innerHTML на строку <input type="...).

Как указывает @jeffamaphone, эта ошибка была исправлена ​​в IE8.

Answer 2

Они исправили это в IE8. В предыдущих версиях вам нужно указать имя при вызове createElement. От MSDN:

Internet Explorer 8 и более поздних версий можно установить атрибут ПАСПОРТНУЮ во время выполнения на элементов динамически создаваемых с помощью метода IHTMLDocument2 :: createElement. Чтобы создать элемент с атрибутом NAME в более ранних версиях Internet Explorer, укажите атрибут и его значение при использовании метода IHTMLDocument2 :: createElement .

Вот пример из MSDN:

var newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='First Choice'>")