2009-08-28 162 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 
相关问题