IE에서의 읽기 전용 innerHTML_javascript 기술

오늘 작업 중 문제가 발생했습니다. 테이블에 여러 행의 데이터를 동적으로 추가하려고 했습니다. 먼저 테이블을 정의했습니다.

코드 복사 코드는 다음과 같습니다:

< /tbody>

다음을 JavaScript로 수행하세요.

코드는 다음과 같습니다:

for(var i in items){

...
var filetable = document.getElementById('filelist ');
filetable.innerHTML = '111222'
}


FireFox에서는 이렇게 합니다. 문제는 없지만 IE 아래에 놓으면 작동하지 않습니다. 동료들에게 검색해 보니 COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY가 나와 있습니다. , TFOOT, THEAD, TITLE, TR은 IE에서 COL, COLGROUP, FRAMESET, HTML, TFOOT, THEAD, TITLE, TR의 요소입니다. innerHTML 속성은 읽기 전용이며 직접 조작할 수 없습니다. 하지만 해결책은 없습니다. TD의 innerHTML은 다음과 같이 수정할 수 있습니다.

코드를 복사하세요 코드는 다음과 같습니다.

for(var i in items){

...
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(td2)
filetable.appendChild(tr);
예 먼저 DOM의 createElement 메소드를 사용하여 tr 및 td를 생성한 다음 td의 innerHTML에 해당 작업을 수행하고 마지막으로 AppendChild 메소드를 사용하여 생성된 요소를 DOM 트리에 추가합니다. 이렇게 하면 IE에서 정상적으로 실행될 수 있습니다. 테이블에 tbody가 없지만 다음과 같은 경우에는

현재는appendChild 메소드를 사용할 수 없습니다. IE6의 테이블 요소는 AppendChild 메소드를 지원하지 않기 때문입니다(IE8은 이미 지원하는 것 같습니다).
인터넷의 일부 사람들은 이를 위해 insertRow()와 같은 메소드를 사용하자고 제안하기도 했지만 이 메소드는 다른 브라우저와의 호환성에도 문제가 있습니다(FireFox에서 insertRow(-1)를 사용해야 함). 쓸모가 없습니다.
그런데 예전에는 JS 정보를 의식적으로 많이 읽었지만, 그래도 연습을 통해 진실을 배웠어요. 지금은 좀 급해서 차분해지는 법을 배우고 있어요.