Javascript DOM操作: 子窗口操作父窗口table

通过createElement可以创建html元素，并通过appendChild方法可以为html增加元素，同样可以通过这种方式来动态的控制table的行、列的增删，在普通的单个页面以内操作本页面的元素时一般是没有问题的，但是如果有这样一种情况：

        在一个页面Parent上通过window.open打开一个新的页面Child时， 在Child页面通过js操作Parent页面上的元素时，如下（这是在Child页面上的一段js）：

//  获取Parent的句柄
var  parent  =  parent.window;

//  获取Parent中的一个元素的句柄，假设Parent中有一个ID为a的一行两列的table;
var   pTable  =  parent.document.getElementById( " a " );

//  我们为该table添加一行数据;
//  先创建一个tr
var  tr  =  document.createElement( " tr " );
//  再创建两个td
var  td1  =  document.createElement( " td " );
var  td1  =  document.createElement( " td " );

//  将这两个td添加到刚才创建的行中
tr.appendChild(td1);
tr.appendChild(td1);

//  将这行添加到Parent的table中
pTable.tBodies[ 0 ].appendChild(tr);

这段代码的运行结果是：
Firefox中：可以正确的为Parent页面的table添加一行
IE中：不能正确的为Parent页面的table添加一行

解决办法：
将代码改为如下所示：

//  获取Parent的句柄
var  parent  =  parent.window;

//  获取Parent中的一个元素的句柄，假设Parent中有一个ID为a的一行两列的table;
var   pTable  =  parent.document.getElementById( " a " );

//  我们为该table添加一行数据;
//  先创建一个tr
var  tr  =  parent.document.createElement( " tr " );  //  改动部分：通过父页面的句柄来创建元素
//  再创建两个td
var  td1  =   parent.document.createElement( " td " );  //  改动部分：通过父页面的句柄来创建元素 
var  td1  =   parent.document.createElement( " td " );  //  改动部分：通过父页面的句柄来创建元素 

//  将这两个td添加到刚才创建的行中
tr.appendChild(td1);
tr.appendChild(td1);

//  将这行添加到Parent的table中
pTable.tBodies[ 0 ].appendChild(tr);

原因:IE中，本页面内创建的元素只能添加在本页面以内。