KoXo 자바스크립트 - 속성(property) - innerHTML | * (A, ACRONYM, ADDRESS, ...) (DHTML)

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

	Script	object.innerHTML=[sVal]
	HTML	없음

인수

object : (개체명)

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

sVal : (속성 문자열)

선택적인 innerHTML 속성값은 지정된 개체의 내부의 유효한 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 속성을 사용하는 것이 좋다.

적용

개체	script	HTML	규격	IE
a	a.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
acronym	acronym.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
address	address.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
b	b.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
bdo	bdo.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
big	big.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
blockQuote	blockQuote.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
body	body.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
button	button.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
caption	caption.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
center	center.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
cite	cite.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
code	code.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
col	col.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
colGroup	colGroup.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
custom	custom.innerHTML[=sVal]	없음	없음	IE5(win32,unix)
dd	dd.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
del	del.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
dfn	dfn.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
dir	dir.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
div	div.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
dl	dl.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
dt	dt.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
em	em.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
fieldSet	fieldSet.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
font	font.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
form	form.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
frameSet	frameSet.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
hn	hn.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
HTMLcomment	HTMLcomment.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
html	html.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
i	i.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
ins	ins.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
kbd	kbd.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
label	label.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
legend	legend.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
li	li.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
listing	listing.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
map	map.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
marquee	marquee.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
menu	menu.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
nextID	nextID.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
noBR	noBR.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
ol	ol.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
Option	Option.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
p	p.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
pre	pre.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
q	q.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
rt	rt.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
ruby	ruby.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
s	s.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
samp	samp.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
script	script.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
select	select.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
small	small.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
span	span.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
strike	strike.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
strong	strong.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
style	style.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
sub	sub.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
sup	sup.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
table	table.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
tBody	tBody.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
td	td.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
tFoot	tFoot.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
th	th.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
tHead	tHead.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
title	title.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
tr	tr.innerHTML[=sVal]	없음	없음	IE5(win16,win32,unix,mac)
tt	tt.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
u	u.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
ul	ul.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)
var	var.innerHTML[=sVal]	없음	없음	IE4.0(win16,win32,ce,unix,mac)

참고

insertAdjacentHTML

property ⇒

innerHTML 속성⇒

⇒

간단한 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>

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

마우스를 클릭해 보라.

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>

property ⇒

innerHTML 속성⇒

⇒

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

스크립트 삽입될 위치

문서에 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>

property ⇒

innerHTML 속성

⇒

최종 수정:
05/25/2025 06:37:31

비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다.
오류가 나면 정상적 접속으로 시도해 보세요.

http://koxo.com/lang/js/property/innerHTML.html

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

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

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

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