之前碰到一個處理列表,為了效率起見決定對table賦值innerHTML,但是發現在IE下無效,想起來很久之前就碰到這個問題,印象中加個tbody就可以了,沒想到加了tbody還是無效,賦值的時候都會報腳本錯誤,難道我記錯了, 沒辦法,用了另外的辦法, 詳細如下:
var docTable = document.getElementById('table1');
//
找到要使用innerHTML的table
var trHtml = '<tr><td>標題1</td><td>標題1</td></tr>'; // 當然如果本來就只有幾行數據就沒必要用innerHTML了,這里只是為了演示
var newDiv = document.createElement('div');
newDiv.innerHTML = '<table></tbody>'+trHTML+'</tbody></table>' // 既然不能給table使用innerHTML,我給新創建的div的innerHTML賦值還不行嗎?
var newTbody = newDiv.childNodes[0].tBodies[0];
var oldTbody = docTable.tBodies[0];
docTable.replaceChild(newTbody, oldTbody); // 用替換子節點的方式來賦值,這樣也只要操作一次,雖然多了一個創建div的步驟,但是因為我們沒有將其添加到body中,所以不會影響頁面的渲染,速度還是很快
var trHtml = '<tr><td>標題1</td><td>標題1</td></tr>'; // 當然如果本來就只有幾行數據就沒必要用innerHTML了,這里只是為了演示
var newDiv = document.createElement('div');
newDiv.innerHTML = '<table></tbody>'+trHTML+'</tbody></table>' // 既然不能給table使用innerHTML,我給新創建的div的innerHTML賦值還不行嗎?
var newTbody = newDiv.childNodes[0].tBodies[0];
var oldTbody = docTable.tBodies[0];
docTable.replaceChild(newTbody, oldTbody); // 用替換子節點的方式來賦值,這樣也只要操作一次,雖然多了一個創建div的步驟,但是因為我們沒有將其添加到body中,所以不會影響頁面的渲染,速度還是很快
其它只讀的innerHTML還有COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR, SELECT 元素