轉自:http://blog.csdn.net/grueclan/archive/2008/01/23/2062125.aspx
通過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);
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);
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中,本頁面內創建的元素只能添加在本頁面以內。