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

Question

Я изменяю 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?

Answer 1

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

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

(акцент мой)

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

Answer 2

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

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

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

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

Вы поняли ...

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

Answer 3

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

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

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

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

Answer 4

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

Answer 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.

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

Answer 6

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

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

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

В 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

Answer 7

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

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

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

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

Answer 8

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

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