Read-Only innerHTML in IE

Source: Internet
Author: User

Today, I encountered a problem when I tried to dynamically add multiple rows of data to a table. I first defined a table:
Copy codeThe Code is as follows:
<Table>
<Thead>
</Thead>
<Tbody id = "filelist">
</Tbody>
</Table>

Perform the following operations in JavaScript:
Copy codeThe Code is as follows:
For (var I in entries ){
...
Var filetable = document. getElementById ('filelist ');
Filetable. innerHTML + = '<tr> <td> 111 </td> <td> 222 </td> </tr> ';
}

There is no problem in doing this in FireFox, but it will not work if I put it under IE. I asked my colleagues and searched for it. I found COL, COLGROUP, FRAMESET, HTML, STYLE in IE, the innerHTML attributes of TABLE, TBODY, TFOOT, THEAD, TITLE, and TR elements are read-only and cannot be operated directly. However, there is no solution. The innerHTML of TD can still be operated. The above code can be modified as follows:
Copy codeThe Code is as follows:
For (var I in entries ){
...
Var filetable = document. getElementById ('filelist ');
Var tr = document. createElement ('tr ');
Var td1 = document. createElement ('td ');
Td1.innerHTML = '20140901 ';
Var td2 = document. createElement ('td ');
Td2.innerHTML = '20140901 ';
Tr. appendChild (td1 );
Tr. appendChild (td2 );
Filetable. appendChild (tr );
}

You can first use the createElement method of DOM to create tr and td, then perform corresponding operations on the innerHTML of td, and finally add the created elements to the DOM tree using the appendChild method. In this way, you can run normally in IE. Note that if your table does not have a tbody, it is like this:
<Table id = "filelist"> </table>
At this time, you cannot directly use the appendChild method for the table, because the table element in IE6 does not support the appendChild method (IE8 seems to be supported ).
Some people have suggested using insertRow () and other methods on the Internet, but this method is also compatible with different browsers (insertRow (-1) is required in FireFox )), so it's useless.
BTW, although I have consciously read a lot of JS materials before, but I still have some practical insights. Now I am beginning to be confused and learn calmly. ING

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.