[jQuery] 제이쿼리 요소의 조작 (추가, 복사 및 삭제)

 

Method	설명
.append()	선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가
.appendTo()	선택된 요소를 해당 요소의 마지막에 추가
.prepend()	선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가
.prependTo()	선택된 요소를 해당 요소의 첫번째에 추가
.after()	선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가
.insertAfter()	선택한 요소를 해당 요소의 뒤쪽에 추가
.before()	선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가
.insertBefore()	선택한 요소를 해당 요소의 앞쪽에 추가
.clone()	선택한 요소를 복사( 특정 태그안의 내용 모두 복사)
.remove()	선택한 요소를 삭제( 태그 안의 내용을 모두 삭제)

 

.append() , .appendTo()

//부모.append(자식) 또는 자식.appendTo(부모) 
.append( content [, content ] ) 
.appendTo( target )

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$( ".inner" ).append( "<p>Test</p>" );

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

 

.prepend(), .prependTo()

//부모.prepend(자식) 또는 자식.prependTo(부모) 
.prepend( content [, content ] ) 
.prependTo( target )

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$( ".inner" ).prepend( "<p>Test</p>" );

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    <p>Test</p>
    Hello
  </div>
  <div class="inner">
    <p>Test</p>
    Goodbye
  </div>
</div>

 

.after(), .insertAfter()

//부모.after(자식) 또는 자식.insertAfter(부모)  
.after( content [, content ] ) 
.insertAfter( target )

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$( ".inner" ).after( "<p>Test</p>" );

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

 

.before(), .insertBefore()

//부모.before(자식) 또는 자식.insertBefore(부모) 
.before( content [, content ] ) 
.insertBefore( target )

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$( ".inner" ).before( "<p>Test</p>" );

<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>

 

.clone()

.clone( [withDataAndEvents ] ) 
.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

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

$( ".hello" ).appendTo( ".goodbye" );

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

 

.remove()

.remove( [selector ] )

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

$( ".hello" ).remove();

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