Home  >  Article  >  Web Front-end  >  Read-only innerHTML_javascript technique under IE

Read-only innerHTML_javascript technique under IE

WBOY
WBOYOriginal
2016-05-16 18:47:561034browse

I encountered a problem while working on something today. I tried to dynamically add multiple rows of data to a table. I first defined a table:

Copy code The code is as follows:





< /tbody>


Then do this in JavaScript:
Copy code The code is as follows:

for(var i in entries){
...
var filetable = document.getElementById('filelist');
filetable.innerHTML = '111222';
}

This is how you do it in FireFox There is no problem, but it will not work if I put it under IE. I asked my colleagues to search and found that COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR are the elements of COL, COLGROUP, FRAMESET, HTML, TFOOT, THEAD, TITLE, TR under IE. The innerHTML properties are read-only and cannot be manipulated directly. But there is no solution. TD’s innerHTML can still be operated. The above code can be modified like this:
Copy the code The 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 = '111';
var td2 = document.createElement('td');
td2. innerHTML = '222';
tr.appendChild(td1);
tr.appendChild(td2);
filetable.appendChild(tr);
}

Yes First use the createElement method of DOM to create tr and td, then perform corresponding operations on the innerHTML of td, and finally use the appendChild method to add the created elements to the DOM tree. This way it can run normally under IE. It should be noted that if your table does not have a tbody, but looks like this:

At this time, you cannot use the appendChild method directly on the table, because The table element under IE6 does not support the appendChild method (IE8 seems to already support it).
Some people on the Internet have also proposed to use methods such as insertRow() to do it, but this method is also problematic in compatibility with different browsers (you need to use insertRow(-1) under FireFox), so it is useless.
BTW, although I have consciously read a lot of JS information before, I still learned the truth through practice. Now I am just in a hurry, so I am learning to be calm.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn