I like to use innerHTML . It is fast and easy to use. But there are some problems under different browsers, such as innerHTML can’t use to insert to table elements under IE.

I have search on google with this issue. There are no good idea to fix innerHTML to table. Someone use Jquery append to instead. I prefer to use myself script for it is more light weight and fit for me. There are some other ideas beside use libs as Jquery. Someone use “<div>” tags between “<td>”, then innerHTML to “<div>”. This is useful, but can’t effect on table.  Also we can use InsertRows functions while this is not I prefer. Then how to use innerHTML to table or table elements perfectly ?

Finally, I have an good idea to fix this issue in IE and also tested under firefox. My idea is to replace whole table. Table elements are readonly under IE. So why we avoid table when use innerHTML ?

Example:

<div id=”mytable”>
<table>
<tr>
<td>domain</td>
<td>pr</td>
</tr>
<tr>
<td>xydw.com</td>
<td>5</td>
</tr>
</table>
</div>

We would insert a row at bottom.

<script type=”text/javascript”>
//get table div
var table = document.getElementById(‘mytable’);

//store old table data, replace tbody, tbody will auto add under IE
var old_data = table.innerHTML.replace(/<\/*tbody>/i, ”);

//the data we want to add
var add_data = ‘<tr><td>lovecms.com</td><td>4</td></tr>’;

//new data, find the tag we want to insert
//we insert into end of the table, so find table
//you can insert to anywhere, just find the tag
var new_data = old_data.replace(/<\/table>/i, add_data + ‘</table>’);

//use my favourite innerHTML here
//both IE and firefox is OK!
table.innerHTML = new_data;
</script>