解决ie下table,tr,td等的innerHTML只读问题

最新推荐文章于 2024-05-11 16:54:37 发布

原创最新推荐文章于 2024-05-11 16:54:37 发布 · 852 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#IE #Firefox #HTML

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Internet Explorer浏览器中，对于特定HTML元素（如COL, COLGROUP等）的innerHTML属性无法被修改的问题，并提供了三种解决方案以实现其操作。包括通过创建新的table元素并使用div的innerHTML属性，或者使用appendChild和swapNode方法来间接实现对这些元素的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]innerHTML[/b]:

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

TR innerHTML problem in IE.

在ie下，对于COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR,innerHTML属性是只读的。也就是说你不能通过innerhtml对这些标签进行操作。

方法一：利用td支持innerHTML为他们添加，你可以仿照下面的例子为你需要的标签添加
table.tr.innerHTML = “namexxxx”; works in Firefox, but doesn’t work in IE.

Quick solution:

var table = document.getElementById(”yourtable”);
var rows = table.rows;

if(document.all) {
rows[0].swapNode(rows[1]); //
} else {
var t = rows[0].innerHTML;
rows[0].innerHTML = rows[1].innerHTML;
rows[1].innerHTML = t;
}

To solve “tr.innerHTML” doesn’t work in IE , below code works in firefox and IE
—————————————-

var otab = document.getElementById(”tab_me”); // you must specify table id.
var str = “”;
for(i=0; i< otab.rows[0].cells.length; i++) {
otab.rows[0].cells[i].innerHTML = “new content here”;
str += otab.rows[0].cells[i].innerHTML + “\n”;
}
alert(str);

方法二：讲table放到一个div里，利用div支持innerHTML来实现

document.getElementById(”yourtable”).firstChild=’’;

方法三：利用appendChild

此方法可以实现但是好像tr也不支持appendChild，需要trick一下