[jQuery] node 제어 API

이번에는 jquey를 이용하여 노드를 제어해보자!

before after prepend append 모두 엘리멘트를 더하는 메소드이다.

차이점을 살펴보면

before 는 

여기

<div class="target>

</div>

여기

<div class="target>

</div>

에 추가되고

after는

<div class="target>

</div>

여기

<div class="target>

</div>

여기

에 추가되고

prepend는

<div class="target>

여기 content1

</div>

<div class="target>

여기 content1

</div>

after는

<div class="target>

content1 여기 

</div>

<div class="target>

content1 여기 

</div>

에 추가된다.

다음 코드는 제거에 관한건데

remove 메소드와 empty메소드가 있다.

remove는 엘리먼트를 전체를 삭제하고

empty는  엘리먼트 자식노드 중 text노드를 삭제한다.

다음 코드는 노드 변경!

1. btn1엘리먼트를 클릭할시에 <div>replaceAll</div> 를 #target1의 엘리먼트에 덮어 쓴다.

2.1. btn2엘리먼트를 클릭할시에 #target1의 엘리먼트를 <div>replaceWith</div>로  덮어 쓴다.

순서만 다르지 replaceAll과 replaceWith는 같은 기능을 한다.

위는 노드 복제

clone()메소드가 추가 되었다.

해석해보면

1. 아이디 값이 소스인 엘리먼트의 클론을 만들고 교체한다 ( 타겟원이 아이디인 엘리먼트로)

다음은 이동

타겟1이 아이디인 엘리먼트 값에 더한다 (아이디가 소스인 엘리먼트)

이는 곧 이동을 의미함