[jQuery기초] 요소조작_이벤트_before, insertBefore, after, insertAfter

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

 

after

선택자 요소 다음에 콘텐츠가 삽입된다. 
구문의 차이만 빼고는 insertAfter와 동일한 작업을 수행한다.

// HTML 
<div id="wrap"> 
	<div>내용</div> 
</div> 

// jQuery 
$('#wrap').after('<div>새로운내용</div>'); 

// 출력 
<div id="wrap"> 
	<div>내용</div> 
</div> 
<div>새로운내용</div>

 

insertAfter

선택자 요소 다음에 콘텐츠가 삽입된다. 
구문의 차이만 빼고는 after와 동일한 작업을 수행한다.

// HTML 
<div id="wrap"> 
	<div>내용</div> 
</div> 

// jQuery 
$('<div class="child">새로운</div>').insertAfter('#wrap');

// 출력 
<div id="wrap"> 
	<div>내용</div> 
</div> 
<div>새로운내용</div>

 

before

선택자 요소 앞에 콘텐츠가 삽입된다. 
구문의 차이만 빼고는 insertBefore와 동일한 작업을 수행한다.

// HTML 
<div id="wrap"> 
	<div>내용</div> 
</div> 

// jQuery 
$('#wrap').before('<div>새로운내용</div>'); 

// 출력 
<div>새로운내용</div> 
<div id="wrap"> 
	<div>내용</div> 
</div>

 

insertBefore 

선택자 요소 앞에 콘텐츠가 삽입된다. 
구문의 차이만 빼고는 before와 동일한 작업을 수행한다.

// HTML 
<div id="wrap"> 
	<div>내용</div> 
</div> 

// jQuery 
$('<div class="child">새로운</div>').insertBefore('#wrap');

// 출력 
<div>새로운내용</div> 
<div id="wrap"> 
	<div>내용</div> 
</div>