[JS] jQuery - 객체 위치 시키기

jQuery를 하면서 선택자가 가장 중요한 부분이라고 언급하였다. 그리고 jQuery에서 제공하는 다양한 메소드 덕분에 자바스크립트로는 까다로운 부분을 비교적 쉽게 구현 할 수 있다는 장점이 있었다.

jQuery의 또다른 장점이 있다. 그것은 얼마든지 동적으로 객체를 생성하고 내가 원하는 자리에 넣을 수 있는 메서드도 제공하기 때문이다. 여기서는 한번 언급하긴 하였으나 제대로 된 설명이 필요했던 메서드들에 대해 알아보기로 하자.

우선 객체의 생성을 보자
$()을 사용하여 객체를 쉽게 생성할 수 있다.
예)
$("<h1></h1>");//h1태그 생성

객체를 생성했다면 문서에 연결이 필요하다.
예)
$("body").append($("h1"));//body에 h1태그 삽입

중요한 메서드가 바로 append()이다. 생성한 객체를 원하는 객체 앞이나 뒤에 연결을 해야 하는데 jQuery에서는 8가지의 메소드를 제공한다. 8가지 메소드는 부모자식관계와 형제관계로 크게 나눌 수 있다.

부모자식관계
$(A).append(B) : 위에서 언급한 메소드이다. 부모 A태그 가장 뒤에 B태그를 위치시킴
$(A).prepend(B) : 부모 A태그 가장 앞에 B태그를 위치시킴
$(A).appendTo(B) : to로 인해 헷갈릴 수 있는 메서드다 주의하자. A태그를 부모 B태그 가장 뒤에 위치시킴
$(A).prependTo(B) : A태그를 부모 B태그 가장 앞에 위치시킴

다음은 형제관계를 보도록 하겠다. 하지만 그전에 도대체 왜 To를 이용하여 선택자에 따른 메소드의 종류를 많이 만들었을까 생각해보자. 그 이유는 체인 메소드를 이용하여 생성하거나 수정한 객체가 부모 태그일 경우나 자식 태그일 경우로 나눠지게 때문이다. 선택한 객체가 자식태그였다면 appendTo나 prependTo를 이용하여 부모태그에 포함시키는 것이 당연하다.

자 설명은 이쯤하고 형제관계를 보자.
$(A).before(B) : A객체 앞에 B를 위치시킴
$(A).after(B) : A객체 뒤에 B를 위치시킴
$(A).insertBefore(B) : A객체를 B앞에 위치시킴
$(A).insertAfter(B) : A객체를 B뒤에 위치시킴

원하는 객체를 원하는 위치에 이동시키기 위해서 꼭 알아야하는 메소드이다. 잘 알아두자.