Loading ...Особенности создания элемента в 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);
}
и будет Вам счастье.
Постовые:
Хотите сэконмить на печать? Я покажу: сделать заправку картриджей HP.
У меня такая же проблема, только не в прототайпе а в jQuery
>>> // Смотрим 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-мя функциями, просто как расширение.
>>> то ведь не мешает корректной работе функции?!
не пробовал, может и не мешает, в любом случае, зачем надеяться на “может”, лучше определять IE по существованию ActiveXObject (IE = !!window.ActiveXObject) или с помощью IE-шных комментариев.
да, здесь вы правы, но я пишу чаще всего на prototype, поэтому если честно не заморачивался, там все проще. if(Prototype.Browser.IE){код для IE}
prototype определяет браузер как раз по существованию ActiveXObject.