Сегодня я хочу обратить ваше внимание на один довольно интересный (если с ним не сталкиваться ) баг, с которым мне довелось повстречаться. Мне нужно было создать таблицу в которую я добавлял строки при помощи innerHTML. Код для добавления строк был приблизительно следующим.

function insertData( name, value ){
	var table = document.getElementById('dataTable');
	table.innerHTML += '<tr><td>'+name+'</td><td>'+value+'</td></tr>';
}

Все работало отлично везде, кроме IE. После долгих поисков я все-таки обнаружил причину. Дело в том, что innerHTML нельзя использовать для добавления содержимого в тэги table, thead, tfoot, tr, которые в Internet Explorer доступны только для чтения (больше об этом можно узнать здесь). Поэтому эти элементы нужно создавать при помощи стандартных методов DOM. Однако и здесь хитро подложены грабли. Оказывается, что при создании таблицы в IE, элемент tbody является обязательным, т.е. структура таблицы должна иметь следующий вид table > tbody > tr > td. Например, следующий код будет работать везде, кроме Internet Explorer:

function createTable(){
	var body = document.getElementsByTagName('body')[0];
	var table = document.createElement('table');
	table.setAttribute('border','2');
	var tr = document.createElement('tr');
	var td = document.createElement('td');
	td.setAttribute('id','myCell');
	td.appendChild(document.createTextNode('Это таблица'));

	tr.appendChild(td);
	table.appendChild(tr);
	body.appendChild(table);
}

В IE таблица будет создана и добавлена в документ (это видно в IE Developer Toolbar), но отображаться она не будет! Теперь, если добавить в таблицу элемент tbody, то проблемы исчезнут:

function createTable(){
	var body = document.getElementsByTagName('body')[0];
	var table = document.createElement('table');
	table.setAttribute('border','2');
	var tbody = document.createElement('tbody');
	var tr = document.createElement('tr');
	var td = document.createElement('td');
	td.setAttribute('id','myCell');
	td.appendChild(document.createTextNode('Это таблица'));

	tr.appendChild(td);
	tbody.appendChild(tr);
	table.appendChild(tbody);
	body.appendChild(table);
}

Не правда ли, жесткий баг? И уж очень он смахивает на peekaboo баг, при котором элементы в IE точно так же не отображаются на странице.

И напоследок, интересная ссылка на сайт с описанием четырех багов innerHTML - Web bug track.
До встречи!

Запись добавлена 26 февраля 2008 в категории Internet Explorer, Отладка.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.