Особенности создания элемента в IE через DOM

Кажется тривиальная задача способна вызвать ступор в работе на некоторое время. Так было и у меня когда-то. Нужно было динамически создавать поля для ввода. Точнее, по нажатию на кнопку создается, например, еще одно текстовое поле. Все было отлично, пока не открыл эту страничку в IE. Элемент создавался, но без имени. С этим надо было что-то делать ибо такое состояние дел не устраивало ни меня, ни тем более заказчика :).

Если Вы создадите элемент выполнив следующий код:

var domEl = document.createElement('input');
domEl.setAttribute('name', 'element_name');

то элемент создастся благополучно, но в IE он будет без имени. Это чревато тем, что обрабатывая такую форму, например, на стороне сервера, вы просто не получите значение поля element_name, что понятное дело неприемлимо. Для борьбы  с этим добром можно использовать следующий прием:

domEl = document.createElement('<input name="element_name" />');

В этом случае элемент создастся нормально. Можно прибегнуть к созданию более универсальной функции, например:

function createElementWithName(tagName, name) {
  var element;
  // Смотрим IE это или нормальный браузер
  if (document.all) {
    element =
      document.createElement('< '+tagName+' name="'+name+'" />');
  } else {
    element = document.createElement(tagName);
    element.setAttribute('name', name);
  }
  return element;
}

Кстати, это глюк встречается и моем любимом js-фреймворке prototype. Там есть такая функция:

var $CE = function(tagName, attributes, styles){ //short for create element

      var el = document.createElement(tagName);

      if (attributes)
            $H(attributes).each(function(pair){
                  eval("el." + pair.key + "='" + pair.value + "'");
            });
      if (styles)
            $H(styles).each(function(pair)
            {
                el.style[pair.key] = pair.value;
            });

      return $(el);
};

Так вот, для корректной работы под Internet Explorer надо заменить строку:

 var el = document.createElement(tagName);

на

      if(Prototype.Browser.IE && attributes.name){
		var el = document.createElement('<'+tagName +' name="'+attributes.name+'" />');
		delete attributes.name;
      } else {
      	var el = document.createElement(tagName);
      }

и будет Вам счастье.

Особенности создания элемента в IE через DOM: 6 комментариев

  1. >>> // Смотрим IE это или нормальный браузер
    >>> if (document.all) {
    в опере document.all тоже есть.

    >>> Элемент создавался, но без имени
    тоже с type и checked.

    >>> Кстати, это глюк встречается и моем любимом js-фреймворке prototype. Там есть такая функция:
    какая версия? Смотрел в 1.3.1, 1.5.1, 1.6.0, 1.6.0.2, 1.6.0.3, 1.6.1_rc2, 1.6.1_rc3, нигде нет.

    • На счет оперы спасибо проверю, на даже если есть, это ведь не мешает корректной работе функции?!
      По-поводу prototype в более ранних версиях, 1.5.1 например, это было в additional methods для объекта Element. Наряду с еще 3-4-мя функциями, просто как расширение.

  2. >>> то ведь не мешает корректной работе функции?!
    не пробовал, может и не мешает, в любом случае, зачем надеяться на «может», лучше определять IE по существованию ActiveXObject (IE = !!window.ActiveXObject) или с помощью IE-шных комментариев.

    • да, здесь вы правы, но я пишу чаще всего на prototype, поэтому если честно не заморачивался, там все проще. if(Prototype.Browser.IE){код для IE}

      • prototype определяет браузер как раз по существованию ActiveXObject.

Обсуждение закрыто.