IE6-IE9의 tbody의 내부 html은 할당 할 수없고, 재현 된 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8"/>
<title> ie6-ie9 innerhtml은 버그를 복사 할 수 없습니다 </title>
</head>
<바디 스타일 = "높이 : 3000px">
<테이블>
<tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</테이블>
<p>
<button id = "btn1"> get </button> <button id = "btn2"> set </button>
</p>
<cript>
var tbody = document.getElementsByTagName ( 'tbody') [0]
함수 settbody () {
tbody.innerhtml = '<tr> <td> bbb </td> </tr>'
}
함수 gettbody () {
알림 (tbody.innerhtml)
}
btn1.onclick = function () {
gettbody ()
}
btn2.onclick = function () {
Settbody ()
}
</스크립트>
</body>
</html>
두 개의 버튼은 첫 번째 버튼이 tbody의 내부 html을 가져오고, 두 번째 버튼은 tbody의 내부를 설정합니다.
그것을 얻을 때, 모든 브라우저는 TR 문자열을 팝업하지만, 설정할 때 IE6-9는이를 지원하지 않으며 그림과 같이 오류 가보고됩니다.
특성을 사용하여 브라우저가 tbody의 내부 설정을 지원하는지 여부를 결정할 수 있습니다.
코드 사본은 다음과 같습니다.
var isupporttbodyinnerhtml = function () {
var table = document.createelement ( '테이블')
var tbody = document.createElement ( 'tbody')
Table.AppendChild (tbody)
var boo = true
노력하다{
tbody.innerhtml = '<tr> </tr>'
} catch (e) {
boo = false
}
반환 부
} ()
경고 (IsupportTbodyInnerHtml)
IE6-IE9의 경우 tbody의 내부를 설정하려면 다음 대체 방법을 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 settbodyinnerhtml (tbody, html) {
var div = document.createelement ( 'div')
div.innerhtml = '<pable>' + html + '</table>'
while (tbody.firstchild) {
tbody.removechild (tbody.firstchild)
}
tbody.appendChild (Div.FirstChild.FirstChild)
}
DIV를 사용하여 테이블을 포함한 다음 TBody의 모든 요소를 삭제 한 다음 DIV의 첫 번째 요소의 첫 번째 요소를 TBODY, 즉 DIV> 테이블> TR에 추가하십시오.
물론 더 간소화 된 버전이 있으며,이 버전은 대체하기 위해 대체물을 직접 사용합니다.
코드 사본은 다음과 같습니다.
함수 settbodyinnerhtml (tbody, html) {
var div = document.createelement ( 'div')
div.innerhtml = '<pable>' + html + '</table>'
tbody.parentnode.replacechild (div.firstchild.firstchild, tbody)
}
MSDN 레코드에서 COL, ColGroup, Frameset, HTML, Head, Style, Table, Tfoot, The Tit 및 Tr의 Innerhtml은 모두 읽기 전용 (IE6-IE9)입니다.
InnerHTML 속성은 COL, ColGroup, Frameset, HTML, Head, Style, Table, TCOY, TFOOT, THEAD, TITE 및 TR 개체에서 읽기 전용입니다.
Document.title 속성을 사용하여 제목 요소의 값을 변경할 수 있습니다.
테이블의 내용, tfoot, thead 및 tr 요소를 변경하려면 테이블을 동적으로 빌드에 설명한 테이블 객체 모델을 사용하십시오. 그러나 특정 셀의 내용을 변경하려면 InnerHTML을 사용할 수 있습니다.