DOM, javascript : document.getElementById().innerHTML

document.getElementById() 를 이용한다면
현재 문서중 해당 Id값을 태그(element / id이므로 유일하겠죠?)에 접근하여 그것의 모든 것을 다룰 수 있습니다.
(자식, 애트리뷰트 등의 모든.)

또한 innerHTML을 이용하여 태그의 자식 엘리먼트들을(?) 원하는 것으로 수정할 수 있습니다.

만약 <table id="table1"><tr><td>삭제될 테이블 박스</td></tr></table> 이라는 html 태그가 있을 경우에

javascript function을 활용하여
var tb1 = document.getElementById("table1");
tb1.border='1';
tb1.innerHTML = "<tr><td>예제입니다.</td></tr>";

이라고 함수를 넣어서 호출해준다면
 

예제입니다.

위와 같은 결과를 볼 수 있습니다.



음.....................................우선 크롬에서는 정상적으로 작동하는데 IE에서는 스크립트 런타임오류가 나네요.
innerHTML에 대해서 말이죠...

** 추가 : 밑의 첨부 글에 보면 엘리먼트들은 IE에서는 innerHTML을 사용할 수 없다고 하네요.
             전에 개인 프로젝트로 동적 테이블 생성을 하면서 사용할 때 잘됐었는데 그때는 디폴트 브라우저가 크롬이라
             정상작동했었나봅니다.. IE에서는 이런 오류가 있는지 몰랐네요 ㅠㅠ 오늘도 배워갑니다 ㅎㅎ

** IE에서 COL COLGROUP FRAMESET HTML STYLE TABLE TBODY TFOOT THEAD TITLE TR 개체에서는 읽기전용이고 그 외의 개체에서는 모두 읽기/쓰기이다. 디폴트값은 없다.

출처 : http://nextstep.co.kr/37