なぜdocument.getElementById（ 'tableId'）ですか？innerHTMLはIE8で動作していませんか？

Question

ページ内のJava Scriptでdocument.getElementById('').innerHTMLを変更します。 Firefoxではうまくいきましたが、IE8ではうまくいきません。詳細は以下を参照してください：

HTMLコード：

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

Javaスクリプトコード：

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

私はFirefoxでJSのコードを実行すると、それはCCC」から表示ワードを変更します'から' abc 'に変わりましたが、IE8で動作していないだけです。だれか知っていますか？私はIE8でもこの仕事をすることができる方法はありますか？

Answer 1

問題はIE8、see MSDNであるので：

プロパティは、次を除くすべてのオブジェクトの読み取り/書き込みされ、それが読み取り専用されている：COL、COLGROUP、FRAMESET、HEAD、HTML、STYLE、 TABLE、TBODY、TFOOT、THEAD、TITLE、TR。

（強調鉱山）

Colin's work-around（trに代わりinnerHTMLのtdにinnerTextを設定するには）あなたのケースでは良いものです。ニーズがより複雑になる場合は、The Table Object Modelにお問い合わせください。

Answer 2

使用この代わりに：

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

Answer 3

私はあなたがtr要素のinnerHTMLプロパティと遊ぶ時にIEが妙に振る舞うと信じています。私はgetElementByIdで行を選択し、[TDを選択し、その1の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 4

innerHTMLのは、ここで指摘したようにするために読み取り専用である： http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

プロパティは、それが読み取り専用であるため、以下を除くすべてのオブジェクトに対して読み取り/書き込みさ：COL、COLGROUP、FRAMESET、HEAD、HTML、 STYLE、TABLE、TBODY、TFOOT、THEAD、タイトル、TR。

なぜ特定の値を変更してその値を変更するだけではないのですか？

Answer 5

TRのinnerHTMLプロパティは読み取り専用で少数の人々が言っ​​てきたように、あなたがTDをターゲットに、あなたのマークアップを変更したほうが良いですされているので：

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

あなたは経由を望むように、あなたはTDの内容を設定することができますこれはあなたに破壊し、余分なを作成するオーバーヘッドを節約

...あなたのアイデアを得る

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

：innerHTMLプロパティは、およびDOMノード上でそれらを設定することにより、他のプロパティを変更しますDOM要素（TD）の代わりに<div></div>の

Answer 6

、あなたも、私はトライデントエンジンの一部を実装男によって書かれたブログ記事へのリンクを見つけた別のStackOverflowの質問に<span></span>

Answer 7

を使用することができます。これは決して修正されていない設計上の欠陥（時間と後方互換性の問題のため）です。あなたはread his notes (including his personal workaround) hereです。

しかし、これは私のプロジェクトで修正するために、すでにjQueryを使用していたので、jQueryの.html()関数を使用しました。

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

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

Answer 8

おかげで非常に参考に.html()

私はjQueryの使用理由を正確にこの種の問題があり、FWIW

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

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