innerHTML добавляется в IE9

У меня есть страница, которая просто пытается сделать следующее в функции javascript:

document.getElementById("chatTable").innerHTML += "<tr><td colspan=\"3\">      ⏎
    <span color=\"purple\">------------Switched to channel: " + channelName +  ⏎
    "------------</span></td></tr>";

Это работает во всех других браузерах, которые я пробовал (Firefox, Chrome, Safari, браузеры телефонов Android, браузеры iPhone), но не в IE9. Да, у меня есть таблица с идентификатором chatTable, и переменная channelName действительно установлена. Я понимаю, что, возможно, смогу добавить строку таблицы, используя DOM для объекта таблицы (я думаю, что это insertRow() или что-то в этом роде), но теперь это стало вопросом принципа, и это сводило меня с ума. Я попытался изменить += только на =, но безуспешно. Я также попытался установить для таблицы свою собственную переменную в javascript, а ЗАТЕМ попытался отредактировать innerHTML, и все равно не повезло. О, и у меня есть:

<!DOCTYPE HTML>

на моей странице. Что я делаю неправильно?!


javascript internet-explorer html-table innerhtml internet-explorer-9
person user1510816    schedule 09.07.2012    source источник
comment
Выполнялся ли файл Javascript после загрузки документа? Любая ошибка в консоли разработки браузера?   -  person Raptor    schedule 09.07.2012

Ответы (2)


arrow_upward
6
arrow_downward

Вы не можете использовать .innerHTML или .outerHTML ни с одним из следующих элементов: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE или TR.

См. раздел Динамическое создание таблиц, чтобы использовать Объектная модель таблиц для управления таблицами в Internet Explorer.

Я полагаю, это может измениться в будущих версиях IE, но пока это то, что вам осталось.

person Jim H.    schedule 09.07.2012
comment
Спасибо, что прояснили это для меня! Теперь я создаю таблицу в javascript, а не добавляю к innerHTML, и она работает нормально. - person user1510816; 10.07.2012

arrow_upward
1
arrow_downward

В дополнение к ответу Джима, когда вы добавляете HTML, вы уничтожаете и перестраиваете существующую таблицу. Даже в браузерах, которые позволяют вам это делать, обычно лучшим решением для добавления строки является следующее:

var table = document.getElementById("chatTable"),
    row = table.insertRow(-1), //-1 means at end
    cell = row.insertCell(0),
    span = document.createElement("span");

span.style.color = "purple";
span.appendChild(document.createTextNode("------------Switched to channel: " + channelName + "------------"));
cell.colSpan = 3;
cell.appendChild(span);
row.appendChild(cell);
table.appendChild(row);

Как правило, это быстрее, и вы не теряете существующие обработчики событий, которые вы прикрепили к вещам в таблице.

person Dennis    schedule 09.07.2012
comment
Спасибо за код! Прекрасно работает. Одно примечание, хотя setAttribute(color, Purple); Не работает, нужно сделать: setAttribute(style, color:purple;); Но в остальном все идеально, спасибо! - person user1510816; 10.07.2012