[ JavaScript ] 자바스크립트 기본 문법 | jQuery 노드 변경 API(before,after,prepend,append,remove,empty...)

이미지 출처 :    https://commons.wikimedia.org/wiki/File:JavaScript-logo.png

 

 

 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 

---

 

 

 

 

자바스크립트 기본 문법  ::  jQuery 노드 변경 API

 

 

 

 

 

jQuery를 이용해서 노드를 제어하는 방법을 알아봅시다.

 

 

jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있습니다.

 

 

 

아래 링크는 jquery api manipulation 관련 링크입니다.

 

 

 

 

http://api.jquery.com/category/manipulation/

Manipulation | jQuery API Documentation

 

 

 

 

추가

 

 

추가와 관련된 주요한 메소드는 4가지입니다.

 

 

각각의 관계를 그림으로 나타내면 아래와 같습니다.

 

 

 

 

 

div 태그가 있다면, 그 div 태그 밖에 형제 관계로 추가되는 것이 before 와 after 이고,

 

prepend 와 append 는 하위로 추가됩니다.

 

 

 

아래 코드는 위의 API를 이용해서 문서의 구조를 변경한 예시 입니다. 

 

 

 

<div class="target">
    content1
</div>
 
<div class="target">
    content2
</div>
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('.target').before('<div>before</div>');
    $('.target').after('<div>after</div>');
    $('.target').prepend('<div>prepend</div>');
    $('.target').append('<div>append</div>');
</script>

 

 

위 코드를 실행한 결과는 아래와 같습니다.

 

 

 

 

 

 

 

 

 

제거

 

제거와 관련된 API는 remove와 empty가 있습니다.

 

remove는 선택된 엘리먼트를 제거하는 것이고,

 

empty는 선택된 엘리먼트의 텍스트 노드를 제거하는 것입니다.

 

 

 

예시로 살펴보도록 하겠습니다.

 

 

 

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<input type="button" value="remove target 1" id="btn1" />
<input type="button" value="empty target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('#target1').remove();
    })
    $('#btn2').click(function(){
        $('#target2').empty();
    })
</script>

 

 

 

아래 그림은 첫번째 버튼(#btn1) 을 눌렀을 때의 html 결과입니다.

 

 

 

 

 

 

target1 이라는 id 를 가진 div 태그 자체가 사라진 것을 알 수 있습니다.

 

 

btn2 를 눌러보도록 하겠습니다.

 

 

 

 

 

 

빨간색 사각형을 보면, div 태그안에 텍스트가 사라진 것을 볼 수 있습니다.

 

 

 

 

 

바꾸기

 

 

 

replaceAll과 replaceWith는 모두 노드의 내용을 교체하는 API입니다.

 

replaceWith가 제어 대상을 먼저 지정하는 것에 반해서 replaceAll은 제어 대상을 인자로 전달합니다.

 

 

 

 

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<input type="button" value="replaceAll target 1" id="btn1" />
<input type="button" value="replaceWith target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('<div>replaceAll</div>').replaceAll('#target1');
    })
    $('#btn2').click(function(){
        $('#target2').replaceWith('<div>replaceWith</div>');
    })
</script>

 

 

 

 

replaceAll 은 바꿀 내용이 우선적으로 오고, 바뀔 대상이 뒤에 옵니다.

 

replaceWith 은 바뀔 대상이 앞에, 바꿀 내용이 뒤에 옵니다.

 

 

 

 

 

 

복사

 

 

노드를 복사하는 방법을 알아봅시다.

 

 

clone 을 이용하면 됩니다.

 

 

 

<div class="target" id="target1">
    target 1
</div>
 
<div class="target" id="target2">
    target 2
</div>
 
<div id="source">source</div>
 
<input type="button" value="clone replaceAll target 1" id="btn1" />
<input type="button" value="clone replaceWith target 2" id="btn2" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('#source').clone().replaceAll('#target1');
    })
    $('#btn2').click(function(){
        $('#target2').replaceWith($('#source').clone());
    })
</script>

 

 

 

clone 을 이용해서 복사하고, 복사한 내용을 replaceAll 과 replaceWith 을 통해

원래의 요소와 바꾼 코드입니다.

 

 

 

 

실행하면 다음 그림과 같습니다.

 

 

 

 

 

 

 

이동

 

 

dom manipulation API의 인자로 특정 노드를 선택하면 이동의 효과가 납니다.

 

 

 

<div class="target" id="target1">
    target 1
</div>
 
<div id="source">source</div>
 
<input type="button" value="append source to target 1" id="btn1" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#btn1').click(function(){
        $('#target1').append($('#source'));
    })
</script>

 

 

 

 

 

 

버튼을 누르면 sourece 가 target1 안으로 append 된 것을 확인할 수 있습니다.