본문 바로가기

개발/jQuery

jQuery (제이쿼리) - jQuery append(), appendTo(), prepend(), prependTo()

HTML DOM 에 새로운 객체를 추가하는 제이쿼리 함수에는 append 와 appendTo 가 있다.

그리고 prepend 와 prependTo 도 있는데 이 두 종류의 함수는 작동 방법이 다를 뿐이고 사용 방법은 완전 동일하다.


append 는 해당 객체를 꼬리에 붙이는 함수이고 prepend 는 해당 객체를 머리에 붙이는 함수이며 

각각 To 가 붙은 appendTo 와 prependTo 와의 차이점은 객체를 먼저 선언하느냐 대상을 먼저 선언하느냐의 차이이다.


기본 사용 문법은 다음과 같다.

$(document).ready(function() {
	// 대상을 먼저 선언한다.
    $("#divContents").append("

순번 1

"); // 객체를 먼저 선언한다. $("

순번 2

").appendTo("#divContents"); // 대상을 먼저 선언한다. $("#divContents").prepend("

순번 3 - 새치기!

"); // 객체를 먼저 선언한다. $("

순번 4 - 새치기!

").prependTo("#divContents"); });

위 예제를 실행해보면 결과값은 순번 4, 순번 3, 순번 1, 순번 2 의 순서로 나오게 된다.


그런데 막상 예제를 써놓고 보니 To 가 붙었으면 ~에게 의 의미가 되니까 당연히 객체를 먼저 지정한 후에

타겟이 나오는 것이 영어 문법에도 맞는 듯한 기분이 든다. (영알못이라 잘 모름)


그럼 여러 방법으로 활용한 예제를 보도록 하자.

$(document).ready(function() {
	// 일반 TEXT 도 정상적으로 잘 들어간다. 
	$("#divContents").append("하이");
    // 태그 형식으로 지정하면 태그까지 정상적으로 반영되어 붙는다.
    $("#divContents").append("

방가방가

"); // 아래와 같은 문법은 작동하지 않는다. "하이루".appendTo("#divContents"); // 혹시나 하여 jQuery 객체로 인식하도록 해봐도 마찬가지이다. $("바이루").appendTo("#divContents"); // 그러나 다음과 같이 태그로 작성하면 정상적으로 작동한다. $("

하이루

").appendTo("#divContents"); $("

바이루

").appendTo("#divContents"); // 하지만!! 다음과 같이 반쪽짜리 온전하지 않은 태그로 작성하면 안 된다. $("

헤이루").appendTo("#divContents"); // 그러나!! append 의 경우에는 반쪽짜리 태그여도 작동한다. $("#divContents").append("

하이룽"); });

우선 내가 생각할 수 있는 경우의 수에 대해서 예제를 만들어봤다.


제이쿼리 라이브러리를 열어서 살펴보면 append 와 appendTo 의 작동 방법에는 약간 차이점이 있는데

내가 그것까지 파고 들기에는 그럴 열정도 시간도 의미도 없어서 파고 들지는 않겠는데...


위의 예제로 돌려본 결과 append 가 appendTo 보다 조금 더 파라미터로 받는 객체에 대한 자유도라고 해야 하나

정합성이 더 좋다고 볼 수 있을 것 같다고 생각이 된다.