[자바스크립트 ] append, prepend, after, before

append, prepend, after, before

페이지 로드 완료 후에 이미지를 순차적으로 로드한다던지 페이지마다 다른 내용을 보여줘야 할 때 등

동적으로 html요소를 추가해야 할때 아주 유용하게 사용되는 함수들입니다.

 

append()	선택한요소의 자식요소 뒤에 내용삽입
prepend()	선택한요소의 자식요소 앞에 내용삽입
after()	선택한 요소의 뒤에 내용 삽입
before()	선택한 요소의 앞에 내용 삽입

 

// 기본 소스 코드
<div id="parentDiv">
	<div id="childDiv"></div>
</div>

 

append()

$("#parentDiv").append('<div id="insertDiv"></div>');

<div id="parentDiv">
	<div id="childDiv"></div>
	<div id="insertDiv"></div>
</div>

 

prepend()

$("#parentDiv").prepend('<div id="insertDiv"></div>');

<div id="parentDiv">
	<div id="insertDiv"></div>
	<div id="childDiv"></div>
</div>

 

after()

$("#parentDiv").after('<div id="insertDiv"></div>');

<div id="parentDiv">
	<div id="childDiv"></div>
</div>
<div id="insertDiv"></div>

 

before()

$("#parentDiv").before('<div id="insertDiv"></div>');

<div id="insertDiv"></div>
<div id="parentDiv">
	<div id="childDiv"></div>
</div>