2009-08-28 50 views
23

我使用Java腳本在頁面中修改document.getElementById('').innerHTML。它在Firefox中運行良好,但不是IE8。請參閱下面的更多細節:爲什麼document.getElementById('tableId')。innerHTML在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改變'to'abc',但它在IE8中不起作用,有人知道爲什麼嗎?有什麼辦法可以讓我在IE8中工作?

+0

FWIW,這種問題就是爲什麼我使用jQuery - 或一些其他圖書館 - 與DOM的工作 – SooDesuNe 2012-09-09 21:49:06

回答

33

由於問題是在IE8,see MSDN

的屬性爲讀/寫爲除了以下的所有對象,對於其是隻讀的:COL,COLGROUP,FRAMESET,HEAD,HTML,樣式, TABLE,TBODY,TFOOT,THEAD,TITLE,TR

(重點煤礦)

Colin's work-around(在tr設置在td而不是innerHTMLinnerText)是一個很好的,你的情況。如果您的需求變得更加複雜,則必須使用The Table Object Model

+0

如果我想改變整個td元素,我應該怎麼做?爲EXP: HTLM代碼

CCC
JScode: 的document.getElementById( 'ABC')的innerHTML。 =' abc' – 2009-08-28 01:02:41

+1

** @ jin yong **'var tds = document.getElementById('abc')。getElementsByTagName('td'); for(var i = 0; i 2009-08-28 03:59:41

+3

只是一個補充。這不僅限於IE8--所有版本的IE都受到這個內在的HTML錯誤的困擾。 http://tinyurl.com/ltar5f – scunliffe 2009-08-28 11:02:04

2

使用這個代替:

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

如果您打算使用innerText,您必須解決Firefox不支持(還?)支持它的事實http://www.google.com.au/search?hl=en&client=firefox-a&rlz=1R1GGGL_en___AU314&hs=8ts&q = innerText + Firefox&btnG =搜索&meta = – 2009-08-28 03:51:05

+2

@MatthewLock Firefox不會支持'innerText',因爲它是一個非標準的屬性,Firefox支持標準的'textContent'。 – undefined 2014-07-07 06:42:58

2

我認爲IE瀏覽器的行爲很奇怪,當你與tr元素的innerHTML玩。我會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

2

的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。

你爲什麼不只是圍繞這個問題提出一個想法並改變這個特定的價值?

5

由於TR的innerHTML是隻讀的幾個人說,你最好改變你的標記瞄準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)

2

取而代之的是<div></div>,你也可以使用<span></span>

2

在另一個StackOverflow的問題,我找到了一個鏈接到由誰執行的發動機三叉戟的那部分的人寫的博客文章。這是一個設計缺陷(由於缺乏時間和向後兼容性問題),這是永遠不會修復的。您可以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>'); 
0

由於其非常有幫助.html()

我用

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

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