개체에 자식 엘레멘트를 첨부한다.

Script

[oVal=]object.appendChild(oNode)

인수/파라메터

oNode

필수적인 요소이며, 첨부되는 엘레멘트를 지정하는 개체이다.

반환값

첨부된 자식 엘레멘트를 참조하는 개체를 반환한다.

특기

appendChild 메서드는 엘레멘트를 childNodes 컬렉션 제일 뒤에 첨부한다.

이 메서드는 IE6.0에서 attribute 개체에도 적용된다.

페이지에 새로운 엘레멘트를 디스플레이하기 위해서는 body 엘레멘트 속에 자식으로 첨부하여야 한다. 예를들어 body에 div 엘레멘트를 첨부하기 위해서는

var oDiv=document.createElement('DIV');
document.body.appendChild(oDiv);

이 메서드는 런타임(run time)에 접속할 수 있다. 런타임에서 이 엘레멘트가 종료태그가 파싱되기 전에 제거되면, 문서의 지역들은 표현되지 않을 수 있다.

적용

개체	script	IE
a	a.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
acronym	acronym.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
address	address.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
attribute	attribute.appendChild(oNode)	IE6(win32)
b	b.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
bdo	bdo.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
big	big.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
blockQuote	blockQuote.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
body	body.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
button	button.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
caption	caption.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
center	center.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
cite	cite.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
code	code.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
col	col.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
colGroup	colGroup.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
comment	comment.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
dd	dd.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
del	del.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
dfn	dfn.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
dir	dir.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
div	div.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
dl	dl.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
dt	dt.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
em	em.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
fieldSet	fieldSet.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
font	font.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
form	form.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
frameSet	frameSet.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
head	head.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
hn	hn.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
html	html.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
i	i.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
iFrame	iFrame.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
button	button.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
checkbox	checkbox.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
FileUpload	FileUpload.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
image	image.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
password	password.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
radio	radio.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
reset	reset.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
submit	submit.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
text	text.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
ins	ins.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
kbd	kbd.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
label	label.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
legend	legend.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
li	li.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
listing	listing.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
map	map.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
marquee	marquee.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
menu	menu.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
nextID	nextID.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
ol	ol.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
Option	Option.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
p	p.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
plainText	plainText.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
pre	pre.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
q	q.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
s	s.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
samp	samp.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
small	small.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
span	span.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
strike	strike.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
strong	strong.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
sub	sub.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
sup	sup.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
table	table.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
tBody	tBody.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
td	td.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
textArea	textArea.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
tFoot	tFoot.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
th	th.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
tHead	tHead.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
tr	tr.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
tt	tt.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
u	u.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
ul	ul.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
var	var.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)
xmp	xmp.appendChild(oNode)	IE5(win16,win32,unix,mac),IE5.5(ce)

참조

cloneNode insertBefore (영문)DOM(W3C Document Object Model)

이 메서드는 (영문)DOM1(W3C Document Object Model Level 1)에서 정의되었다.

method ⇒

appendChild 메서드⇒

<SCRIPT>
function appChild(){
  if (oList.all.length<6){
    var oNewNode=document.createElement('LI');
    oList.appendChild(oNewNode);
    oNewNode.innerText='항목 번호 '+oList.all.length;
  }
}
</SCRIPT>
<UL id=oList>
<LI>항목 번호  1
<LI>항목 번호  2
</UL>
<INPUT type="button" value="자식 개체 추가" onclick="appChild()">

method ⇒

appendChild 메서드

⇒

최종 수정: 05/25/2025 09:52:04

All right reserved

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

http://koxo.com/lang/js/method/appendChild.html