[자바스크립트] append, prepend, after, before 설명과 사용방법

안녕하세요 이번에는 자바스크립트에서 동적으로 추가하는 메소드에 대한 내용를 다뤄 보겠습니다.

 

 

append()	컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입
prepend()	콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입
after()	선택한 요소 뒤에 컨텐츠 삽입
before()	선택된 요소 앞에 컨텐츠 삽입

자 그럼 간단한 테스트로 확인 해보겠습니다.

 

기존 소스는 다음과 같습니다.

<div id="testDiv">
  <div id="childDiv"></div>
</div>

 

append() 

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

 

prepend()

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

 

 

after()

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

 

 

before()

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

 

 

이상입니다 감사합니다.