지정된 개체의 내부 HTML 태그를 반환하거나 지정한다.

인수
object : (개체명)

필수적인 요소이며, 적용될 개체의 이름이다.

: (속성 문자열)
선택적인 속성값은 지정된 개체의 내부의 유효한 HTML 태그를 나타내는 문자열이다.

문자열은 엘레멘트의 시작태그에서 종료태그까지의 모든 내용을 포함한다.

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

특기

innerHTML 속성은 블럭모드나 라인모드 엘레멘트에 모두 적용된다. 시작태그와 종료태그가 없는 엘레멘트는 원리적으로 innerHTML 속성을 가질수 없다.

innerHTML 속성은 유효한 텍스트와 엘레멘트들을 반환한다.

innerHTML 속성이 설정되면 현재 개체의 모든 내용이 새로운 내용으로 완전히 대체된다. 새로운 내용이 HTML 태그를 가지고 있으면 페이지에 있는 것 처럼 파싱되고 표현된다.

이 속성은 IE5에서 run time에 접속할 수 있다. 종료태그가 파싱되기 전에 엘레멘트를 제거하면 문서의 다른 지역의 표현을 막을 수 있다.

innerHTML로 스크립트를 삽입할 때는 script 엘레멘트 속에 defer 애트리뷰트를 포함시켜야 한다.

title 엘레멘트의 값은 document.title 속성을 사용하여 변경시킬 수 있다.

table, tFoot, tHead, tr 엘레멘트 내용도 탄력적으로 변경시킬 수 있다.
예를들어 rowIndex 속성나 rows 컬렉션을 사용하여 특정 테이블의 참조를 얻고,
insertRow 메서드로 줄을 삽입하고, deleteRow 메서드를 사용하여 줄을 삭제할 수 있다.
특정 칸을 참조하기 위하여 cellIndex 속성이나 cells 컬렉션을 사용할 수 있다.
insertCell와 deleteCell 메서드를 사용하여 줄에 칸을 추가하거나 제거할 수 있다.
칸의 내용을 변경시키기 위하여 innerHTML 속성을 사용하면 된다.

이전 버전과의 호완성을 위하여 이 속성은 textArea 개체에도 적용된다. 그러나 이 속성은 문자열만 포함할 수 있고 태그는 포함될 수 없다. 태그를 갖는 문자열을 포함하면 오류를 반환하므로 그 개체에서 innerText 속성을 사용하는 것이 좋다.

적용
개체scriptHTML규격IE
참고
insertAdjacentHTML

간단한 innerHTML 속성 예제 
<DIV id=objName></DIV>
<SCRIPT>
objName.innerHTML='<IMG src=../../gif/rfproperty.gif>';
</SCRIPT>

<SCRIPT>
myObj=new Object();
myObj.innerHTML='<MARQUEE><IMG src=../../gif/rfproperty.gif></MARQUEE>'
document.write(myObj.innerHTML);
</SCRIPT>

속성으로 마퀴방향을 바꾼 태그로 교체하는 예제

마우스를 클릭해 보라.

onclick 이벤트에서 innerHTML 속성으로 HTML 내용을 바꾼다. 반복해 보라.

<P id=pObj style="width:300;height:40;border:solid 1 blue;padding:5;cursor:hand;"
  onclick="doEvent()">마우스를 클릭해 보라.</P>
</DIV>
<SCRIPT>
sw=1;
tagA='<MARQUEE><IMG src=../../gif/rfproperty.gif> <FONT color=red>마우스를 클릭해 보라.</FONT></MARQUEE>';
tagB='<MARQUEE direction=right><FONT color=blue>마우스를 클릭해 보라.</FONT> <IMG src=../../gif/rfproperty.gif></MARQUEE>';
function doEvent(){
  if (sw){
    pObj.innerHTML=tagA;
    sw=0;
  } else {
    sw=1;
    pObj.innerHTML=tagB;
  }
}
</SCRIPT>

속성으로 새로운 스크립트를 삽입하는 예제


스크립트 삽입될 위치

문서에 innerHTML 속성을 사용하여 스크립를 삽입한다.

<SCRIPT>
function insertScript(){
  sHTML='<BUTTON onclick=doNotify()>삽입된 이 단추를 클릭해 보라.</BUTTON><BR>';
  sScript='\<SCRIPT defer\>function doNotify(){alert("스크립트 삽입 알림") }\</SCRIPT\>';
  ScriptDiv.innerHTML=sHTML+sScript;
}
</SCRIPT>
<BUTTON onclick="insertScript()" width=300>클릭하여 스크립트를 삽입해 보라.</BUTTON><BR>
<DIV id="ScriptDiv" style="border:solid 1 blue;width:300;padding:5">스크립트 삽입될 위치</DIV>