관리 메뉴

Life goes slowly...

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

프로그래밍/Javascript

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

빨강소 2020. 10. 28. 00:10
728x90
반응형

 

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>

 

728x90
반응형
Comments