Задание имени элемента, созданного 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 программная установка атрибута name для элемента, созданного с помощью document.createElement('input'), не отражается в getElementsByName, form.elements (при добавлении в форму) и является не отправляется с form (опять же, при добавлении в форму) [ Ссылка ].

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

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)
}

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

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

Answer 2

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

Internet Explorer 8 и более поздние версии можно установить атрибут NAME во время выполнения элементы, динамически созданные с IHTMLDocument2 :: createElement метод. Чтобы создать элемент с именем атрибут в более ранних версиях Internet Explorer, включите атрибут и его значение при использовании IHTMLDocument2 :: createElement метод.

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

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