[ Node ] jQuery 노드 변경 API

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

jQuery를 이용해서 노드를 제어하는 방법을 알아보자.

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

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

---

추가

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

 

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

아래 코드는 위의 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는 선택된 element를 제거하는 것이고, empty는 선택된 element의 텍스트 노드를 제거하는 것이다.

(실행 결과)

<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>

---

삭제전

삭제 후

위와 같이, remove는 감싸고 있는 div박스까지 삭제되는데, empty는 div박스는 삭제되지 않고 target 2라는 문자열만 삭제된다.

---

바꾸기

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>

---

실행 전

실행 후

---

이동

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>