Почему document.getElementById('tableId'). InnerHTML не работает в IE8?

Я изменяю document.getElementById('').innerHTML с помощью Java Script на странице. Он отлично работает в Firefox, но не в IE8. Подробнее см. Ниже:

Код HTML:

<table>
  <tr id="abc">
     <td id="ccc" style="color:red;">ccc</td>
  </tr>
</table>

Java Script код:

  document.getElementById('abc').innerHTML = '<td id="bbc" style="color:yellow;">abc</td>'

Когда я запускаю JS-код в Firefox, он изменит отображаемое слово с 'ccc' на 'abc', но он просто не работает в IE8, знает ли кто-нибудь почему? Есть ли способ сделать эту работу в IE8?

Ответ 1

Так как проблема в IE8, см. MSDN:

Свойство читается/записывается для всех объектов, кроме следующих, для которых оно доступно только для чтения: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

(акцент мой)

Работа Колина (установка innerText в td вместо innerHTML на tr) является хорошей в вашем случае. Если ваши потребности становятся более сложными, вам придется прибегнуть к Модель объектов таблицы.

Ответ 2

Так как TR innerHTML доступен только для чтения, как говорили несколько человек, вам лучше изменить свою разметку для таргетинга на TD:

<table><tr><td id="changeme"> ... </td></tr></table>

Затем вы можете установить содержимое TD по своему усмотрению с помощью innerHTML и изменить другие свойства, установив их на DOM node:

var td = document.getElementById("changeme");
td.innerHTML = "New Content";
td.cssText = "color: red";
td.className = "highlighted";

Вы получаете идею...

Это экономит ваши накладные расходы на уничтожение и создание дополнительного элемента DOM (TD)

Ответ 3

Используйте это вместо:

document.getElementById('abc').innerText = 'ccc';

Ответ 4

Я считаю, что IE ведет себя странно, когда вы играете с innerHTML элементов tr. Я бы выбрал строку с getElementById, а затем выберем td и изменим ее innerHTML:

document.getElementById('abc').firstChild.innerHTML = 'abc';

(Хотя вы должны быть осторожны с этим: часто пробелы между tr и td будут считаться действительными node)

Здесь имеется целая куча специальных функций для работы с таблицами в DOM

var tblBody = document.getElementById(tblId).tBodies[0];
var newRow = tblBody.insertRow(-1);
var newCell0 = newRow.insertCell(0);

Посмотрите все функции здесь: http://www.mredkj.com/tutorials/tablebasics1.html

Ответ 5

innerHTML используется только для чтения, как указано здесь: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

Свойство читается/записывается для всех объектов, кроме следующих, для которых оно доступно только для чтения: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Почему вы не просто помещаете идею вокруг и меняете это значение?

Ответ 6

Вместо <div></div> вы также можете использовать <span></span>

Ответ 7

В другом вопросе StackOverflow я нашел ссылку на сообщение в блоге, написанное парнем, который реализовал ту часть двигателя Trident. Это дефект дизайна (из-за нехватки времени и проблем с обратной совместимостью), который никогда не был исправлен. Вы можете прочитать его заметки (включая его личное обходное решение) здесь.

Однако, чтобы исправить это в моем проекте, поскольку я уже использовал jQuery, я просто использовал функцию jQuery .html().

// OLD 
localRows[cIndex].innerHTML = '<div>Test Div</div>';

// FIXED
$(localRows[cIndex]).html('<div>Test Div</div>');

Ответ 8

Спасибо, очень полезно .html()

Я использовал

document.getElementById('site'+cValue).innerHTML=tableReadyElem; //work with mozila not ie

$(document.getElementById('site'+cValue)).html(tableReadyElem);//work for both