Dlaczego document.getElementById ("tableId"). InnerHTML nie działa w IE8?

Question

Modyfikuję za pomocą Java Script na stronie. Działa dobrze w Firefoksie, ale nie w IE8. Poniżej znajdują się bardziej szczegółowe informacje:

HTML kod: kod

<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>' 

Kiedy uruchomić kod JS w Firefoksie, to zmienić słowo wyświetlacza z „CCC "do" abc ", ale po prostu nie działa w IE8, czy ktoś wie, dlaczego? Czy jest jakikolwiek sposób, w jaki mogę wykonać tę pracę również w IE8?

Answer 1

Ponieważ problem jest w IE8, see MSDN:

Nieruchomość odczytu/zapisu dla wszystkich obiektów z wyjątkiem następujących, dla których jest on tylko do odczytu: Col, COLGROUP, FRAMESET, głowa, HTML, styl, TABELA, TBODY, TFOOT, THEAD, TITLE, TR.

(Kopalnia nacisk)

Colin's work-around (ustawienie innerText na td zamiast innerHTML na tr) jest dobry w swojej sprawie. Jeśli twoje potrzeby staną się bardziej złożone, musisz odwołać się do The Table Object Model.

Answer 2

Użyj tego zamiast:

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

Answer 3

Wierzę IE zachowuje się dziwnie, gdy grasz z innerHTML tr elementów. Chciałbym zaznaczyć wiersz z getElementById, a następnie wybrać td i zmieniać, że jeden za innerHTML:

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

(Chociaż trzeba być ostrożnym z tego: często odstępy pomiędzy tr i td zostaną uznane za ważne node)

jest cała kupa funkcji specjalnych do pracy z tabelami w DOM

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

Zobacz wszystkie funkcje tutaj: http://www.mredkj.com/tutorials/tablebasics1.html

Answer 4

innerHTML jest tylko do odczytu tak tu podkreślić: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

Nieruchomość odczytu/zapisu dla wszystkich obiektów z wyjątkiem następujących, dla których jest tylko do odczytu: COL COLGROUP, FRAMESET, HEAD, HTML, STYL, STÓŁ, TBODY, TFOOT, THEAD, TYTUŁ, TR.

Dlaczego po prostu nie tworzysz idei i nie zmieniasz tej konkretnej wartości?

Answer 5

Od TR innerHTML jest tylko do odczytu, jak kilka osób mówi, jesteś lepiej zmieniając znaczników do kierowania TD:

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

Następnie można ustawić zawartość TD jak chcesz poprzez innerHTML i zmiany innych właściwości, ustawiając je w węźle DOM:

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

Masz pomysł ...

To oszczędza napowietrznej niszcząc i tworząc dodatkowy Element DOM (TD)

Answer 6

Zamiast <div></div>, można również użyć <span></span>

Answer 7

Na innym StackOverflow pytanie znalazłem link do blogu napisany przez faceta, który realizowany że część silnika Trident. Jest to wada projektowa (z powodu braku czasu i zgodności wstecznej), która nigdy nie została naprawiona. Możesz read his notes (including his personal workaround) here.

Jednak, aby naprawić to na moim projekcie, ponieważ już używałem jQuery, po prostu użyłem funkcji jQuery: .html().

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

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

Answer 8

Dzięki jego bardzo pomocny .html()

używałem

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

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