Сегодня я хочу обратить ваше внимание на один довольно интересный (если с ним не сталкиваться 
) баг, с которым мне довелось повстречаться. Мне нужно было создать таблицу в которую я добавлял строки при помощи 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.
До встречи!
