为什么是的document.getElementById( 'TABLEID')。i

2019-06-21 05:09发布

我修改document.getElementById('').innerHTML Java脚本的页面。 它的正常工作在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, 请参阅MSDN :

该属性为读/写的除了下面,它是只读的所有对象:COL,COLGROUP,FRAMESET,HEAD,HTML,样式,TABLE,TBODY,TFOOT,THEAD,TITLE,TR。

(重点煤矿)

科林的变通 (设置innerTexttd ,而不是innerHTMLtr )是一个很好的,你的情况。 如果你的需求变得越来越复杂,你就不得不求助于表格对象模型 。



Answer 2:

由于TR的innerHTML是只读的几个人说,你最好改变你的标记为目标的TD:

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

然后,当您通过innerHTML的希望,并通过设置他们的DOM节点上更改其他属性可以设置TD的内容:

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

你的想法...

这样可以节省你破坏和创造额外的DOM元素(TD)的开销



Answer 3:

在另一StackOverflow的问题,我找到了一个链接到由谁执行的发动机三叉戟的那部分的人写的博客文章。 这是一个设计缺陷(由于缺少时间和向后兼容性问题),这是从来没有固定的。 你可以看他的笔记(包括他个人的解决方法)在这里 。

然而,要解决它在我的项目,因为我已经使用jQuery,我只是用jQuery的.html()函数。

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

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


Answer 4:

我相信,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 5:

innerHTML的是只读的,对于这里指出: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

该属性为读/写的除了下面,它是只读的所有对象:COL,COLGROUP,FRAMESET,HEAD,HTML,样式,TABLE,TBODY,TFOOT,THEAD,TITLE,TR。

你为什么不只是把周围的一个想法,改变这种特定的价值?



Answer 6:

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



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


文章来源: Why is document.getElementById('tableId').innerHTML not working in IE8?