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

자바스크립트의 동적 추가 메서드에는 append, prepend, after, before가 있다. 콘텐츠를 어디에 추가할지 결정한다. 비슷하면서도 조금씩 다른 각 메서드들에 대해서 알아보자.

 

* 동적 추가 메소드

각 콘텐츠의 메서드에 해당하는 위치에 추가할 내용을 추가시킨다.

메소드	설명	예제.   <p> 내용 </p> 라는 콘텐츠가 있을 경우
append()	선택한 콘텐츠의 끝 부분에 내용 추가	<p> 내용 (추가) </p>
prepend()	선택한 콘텐츠의 시작 부분에 내용 추가	<p> (추가) 내용 </p>
after()	선택한 콘텐츠 뒤에 내용 추가	<p> 내용 </p> (추가)
before()	선택한 콘텐츠의 앞에 내용 추가	(추가) <p> 내용 </p>

 

기본 사용 형식은 다음과 같다.

 

$(내용).append(추가)

 

내용 항목에 추가하는 것이다.

 

참고로, 내용 항목에는 다음과 같은 것들이 있다.

 

$("태그명")

$(".클래스명")

$("#아이디")

 

 

예시를 통해서 확인해 보자.

다음 문장을 기본 문장으로 확인해 보자.

<div id="add1"> 동적 추가 메소드 예시 입니다 </div>

 

 

* append 예시

$("#add1").append('<p> Added here </p>');

<div id='add1'>
    동적 추가 메소드 예시 입니다
    <p> Added here </p>    
</div>

 

* prepend 예시

$("#add1").prepend('<p> Added here </p>');

<div id='add1'>
    <p> Added here </p>
    동적 추가 메소드 예시 입니다
</div>

 

* after 예시

$("#add1").after('<p> Added here </p>');

<div id='add1'>
    동적 추가 메소드 예시 입니다
</div>
<p> Added here </p>

 

* before 예시

$("#add1").before('<p> Added here </p>');

<p> Added here </p>
<div id='add1'>
    동적 추가 메소드 예시 입니다
</div>