Html MSIE8兼容模式未呈现动态创建的表_Html_Internet Explorer 8_Quirks Mode

Html MSIE8兼容模式未呈现动态创建的表

html internet-explorer-8

Html MSIE8兼容模式未呈现动态创建的表,html,internet-explorer-8,quirks-mode,Html,Internet Explorer 8,Quirks Mode,有点奇怪。。。如果在IE8怪癖模式或兼容性视图模式下运行，则以下代码添加的表不会呈现。谁能告诉我为什么，因为这对我来说并不明显 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function AddTable() { var table = document.createElement('table'); var row = document.createElement('tr'

有点奇怪。。。如果在IE8怪癖模式或兼容性视图模式下运行，则以下代码添加的表不会呈现。谁能告诉我为什么，因为这对我来说并不明显

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function AddTable()
{
  var table = document.createElement('table');
  var row = document.createElement('tr');
  table.appendChild(row);
  var cell = document.createElement('td');
  cell.innerHTML='abc';
  row.appendChild(cell);
  var divContainer = document.getElementById('divContainer');
  divContainer.appendChild(table);
}
</script>
</head>
<body>
<div id='divContainer'>
</div>
<input type='button' value='add table' onclick='javascript:AddTable()' />
</body>
</html>


函数AddTable（）
{
var table=document.createElement（'table'）；
var行=document.createElement（'tr'）；
表2.追加子项（行）；
var cell=document.createElement（'td'）；
cell.innerHTML='abc'；
子行（单元格）；
var divContainer=document.getElementById（'divContainer'）；
divContainer.appendChild（表）；
}

尝试添加tbody元素

而不是

  var row = document.createElement('tr');
  table.appendChild(row);

做

微软有一个页面可以说明正在发生的事情

对于动态构建表，他们提倡“表对象模型”，它使用

insertRow（）

和

insertCell（）

等方法来完成DOM方法

createElement（）

和

appendChild（）

的工作。如果您使用DOM方法也可以，但是“Internet Explorer要求您在使用DOM时创建tBody元素并将其插入表中。因为您直接操作文档树，所以Internet Explorer不会创建tBody，这在使用HTML时会自动暗示。”

表对象模型在我测试过的两种浏览器（Mac上的Chrome和Firefox）中都能工作，因此熟悉它可能不是一个坏主意。或者，如果您想坚持使用DOM方法，可以添加

tBody

元素，因为IE需要它

如果将以下代码添加到

AddTable（）

方法的末尾，您将看到这两个方法的比较结果（主要是第二个表中有一个

tBody

）。它将在IE8中呈现

 // now the Table Object Model way
  table = document.createElement('table');
  row = table.insertRow(-1) ;
  cell = row.insertCell(-1) ;
  cell.innerHTML='def';
  divContainer.appendChild(table);

希望这有帮助。

很有趣。如果添加警报（divContainer.outerHTML）；在appendChild之后，您将看到您的DOM已经更新，但是没有任何呈现。在标准模式下工作；有人提出了一个解决怪癖的办法：是的，这是一件奇怪的事情；DOM已更新，但未呈现任何内容。我试着使用各种CSS属性，看看这是否会以某种方式迫使它渲染一些东西，但到目前为止没有运气。感谢链接到解决方法。我想我只需要添加一个检查它是否在IE中运行，然后我将执行divContainer.innerHTML=divContainer.innerHTML技巧……（悬赏原因：上述解决方法（来自EricLaw）运行良好，但我仍然想知道这是一个bug还是出于设计，如果是，为什么……因此我认为悬赏将到位……+1谢谢，是的，这使得它可以渲染表，但对如何渲染有一些有趣的影响。。。还不知道为什么，我会看看能找到什么。

 // now the Table Object Model way
  table = document.createElement('table');
  row = table.insertRow(-1) ;
  cell = row.insertCell(-1) ;
  cell.innerHTML='def';
  divContainer.appendChild(table);