제이쿼리(jQuery) - 제어(삽입,삭제)

삽입

형제의 위치에 삽입

.after()

지정한 요소 뒤에 내용 삽입

A.after(B) A뒤에 B를 추가

코드

$( ".inner" ).after( "<p>Test</p>" );
// class=inner 뒤에 <p>Test</p> 추가

.insertAfter()

지정한 내용을 요소 뒤에 삽입

A.insertAfter(B) B뒤에 A를 추가

코드

$( "<p>Test</p>" ).insertAfter( ".inner" );
// <p>Test</p>를 class=inner 뒤에 추가

같은결과

<div class="inner">hello</div>
<p>Test</p>

.before()

지정한 요소의 앞에 요소를 삽입 

A.before(B) A 앞에 B를 추가

코드

$( ".inner" ).before( "<p>Test</p>" );
// class=inner 앞에 <p>Test</p> 추가

.insertBefore()

지정한 요소의 앞에 요소를 삽입

A.insertBefore(B) B 앞에 A를 추가

코드

$( "<p>Test</p>" ).insertBefore( ".inner" );
// <p>Test</p>를 class=inner 앞에 추가

같은결과

<p>Test</p>
<div class="inner">hello</div>

 

자식으로 삽입

.append()

지정한 요소의 자식으로 마지막에 내용 삽입

코드

$("div").append("<p>내용</p>");
// div 뒤에 <p>내용</p> 를 삽입

.appenTo()

지정한 내용을 요소의 자식으로 마지막에 삽입

코드

$("<p>내용</p>").appendTo($("div"));
// <p>내용</p>를 div 뒤에 삽입

같은결과

<div class="inner">
	hello
	<p>Test</p>
</div>

.prepend()

지정한 요소의 자식으로 맨앞에 내용 삽입

코드

$("div").prepend("<p>내용</p>");
// div 앞에 <p>내용</p> 를 삽입

.prependTo()

지정한 내용을 요소의 자식으로 맨앞에 삽입

코드

$("<p>내용</p>").prependTo($("div"));
// <p>내용</p>를 div 앞에 삽입

같은결과

<div class="inner">
	<p>Test</p>
	hello
</div>

 

감싸는 요소

.wrap()

$() 형식으로 쓰는 함수의 선택한 요소 각각을 문자열 또는 객체로 감싼다.

코드

.$(".inner").wrap('<div class="new"></div>');
// class=inner 집합 요소 각각을 <div class ="new"></div>

.$(".inner").wrap(function(){
	return '<div class="new"></div>');
	// class=inner 집합 요소 각각을 <div class ="new"></div>
});

결과

<div class="new">
	<div class="inner">Hello</div>
</div>
<div class="new">
	<div class="inner">Hello</div>
</div>

.wrapAll()

$() 형식으로 쓰는 함수의 선택한 요소 전체를 문자열 또는 객체로 감싼다.

코드

.$(".inner").wrapAll('<div class="new"></div>');
// class=inner 집합 요소 전체를 <div class ="new"></div>

결과

<div class="new">
	<div class="inner">Hello</div>
	<div class="inner">Hello</div>
</div>

.wrapInner()

$() 형식으로 쓰는 함수의 선택한 요소 각각의 내부를 문자열 또는 객체로 감싼다.

코드

.$(".inner").wrapInner('<div class="new"></div>');
// class=inner 집합 요소 각각의 내부를 <div class ="new"></div> 로 감싼다

결과

<div class="inner">
	<div class="Hello">Hello</div>
</div>
<div class="inner">
	<div class="Goodbye">Goodbye</div>
</div

.unwrap()

선택한 요소 집합의 부모를 제거한다.

.$(".inner").wrap(); 
// class=inner 집합 요소의 부모를 제거한다.

 

삭제

.remove()

지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

$(".hello").remove();
// .hello 포함 하위 요소, 이벤트, 데이터 모두 제거

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

.detach()

지정한 요소를 포함 하위 요소 모두 제거.

제거하는 부분은 .remove()와 같지만 .detach()는 제거한 요소를 저장하고 다시 사용할 수 있다.

문법

.detach( [selector ] )

사용예제

var hello = $(".hello").detach();
// 사용할 요소를 변수에 지정

결과보기

See the Pen .detach() by mansu (@mansunii) on CodePen.

 

 

.empty()

지정한 요소의 하위 요소를 제거

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

$(".hello").empty();
// .hello 하위 요소 모두 제거

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>