자바스크립트의 동적 추가 메서드에는 append, prepend, after, before가 있다. 콘텐츠를 어디에 추가할지 결정한다. 비슷하면서도 조금씩 다른 각 메서드들에 대해서 알아보자.
* 동적 추가 메소드
각 콘텐츠의 메서드에 해당하는 위치에 추가할 내용을 추가시킨다.
| 메소드 | 설명 | 예제. <p> 내용 </p> 라는 콘텐츠가 있을 경우 |
| append() | 선택한 콘텐츠의 끝 부분에 내용 추가 | <p> 내용 (추가) </p> |
| prepend() | 선택한 콘텐츠의 시작 부분에 내용 추가 | <p> (추가) 내용 </p> |
| after() | 선택한 콘텐츠 뒤에 내용 추가 | <p> 내용 </p> (추가) |
| before() | 선택한 콘텐츠의 앞에 내용 추가 | (추가) <p> 내용 </p> |
기본 사용 형식은 다음과 같다.
$(내용).append(추가)
내용 항목에 추가하는 것이다.
참고로, 내용 항목에는 다음과 같은 것들이 있다.
$(“태그명”)
$(“.클래스명”)
$(“#아이디”)
예시를 통해서 확인해 보자.
다음 문장을 기본 문장으로 확인해 보자.
JavaScript
<div id="add1"> 동적 추가 메소드 예시 입니다 </div>* append 예시
$(“#add1”).append(‘<p> Added here </p>’);
JavaScript
<div id='add1'>
동적 추가 메소드 예시 입니다
<p> Added here </p>
</div>* prepend 예시
$(“#add1”).prepend(‘<p> Added here </p>’);
JavaScript
<div id='add1'>
<p> Added here </p>
동적 추가 메소드 예시 입니다
</div>* after 예시
$(“#add1”).after(‘<p> Added here </p>’);
JavaScript
<div id='add1'>
동적 추가 메소드 예시 입니다
</div>
<p> Added here </p>* before 예시
$(“#add1”).before(‘<p> Added here </p>’);
JavaScript
<p> Added here </p>
<div id='add1'>
동적 추가 메소드 예시 입니다
</div>