.appendTo()
원문 링크 
http://api.jquery.com/appendTo/
개요 : 새로운 요소를 타겟(target)에 해당하는 요소 마지막에 추가합니다.
- .attr( attributeName )
- target 선택자(selector), 요소(element), HTML 문자열, jQuery 객체; 이 인자로 선택된 요소(들)에 새로운 요소가 추가됩니다.
이전 append()함수에서도 말씀드렸습니다. .append() 와 .appendTo() 함수는 동일한 기능을 합니다. 단, 추가될 컨텐츠와 타겟의 위치가 두 함수의 가장 큰 차이점입니다. append함수는 A.append(B)라면 A에 B를 추가하는 것이고 A.appendTo(B)는 B에 A를 추가하는 겁니다.
아래 HTML을 보시죠.
<h2>Greetings</h2> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
우리는 한번에 여러 요소에 새로운 컨텐츠를 추가할 수 있습니다. 아래처럼요.
$('<p>Test</p>').appendTo('.inner');
위 스크립트의 결과는 각 inner 클래스를 가진 <div> 요소에 새로운 요소가 아래와 같이 추가되게 됩니다.:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
우리는 또한 다른 방법으로 새로운 요소를 추가할 수도 있습니다.
$('h2').appendTo($('.container'));
만약 이런 방법으로 실행되면 컨텐츠는 타겟안으로 이동되게 됩니다.(복사가 되는게 아니구요.)
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> <h2>Greetings</h2> </div>
만약 타겟에 해당하는 요소가 복수개라면, 처음 작업은 이동되고 그 다음에 추가될 때는 그 첫번째 작업에 대한 내용을 복사하여 추가하게 됩니다. 즉, 복수개일 경우 처음에 이동되고 그 다음부터는 복사되며 추가된다는 거죠.
예 제
ID="foo" 인 요소에 모든 span요소들을 추가시킵니다.
<!DOCTYPE html>
<html>
<head>
<style>#foo { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>I have nothing more to say... </span>
<div id="foo">FOO! </div>
<script>$("span").appendTo("#foo"); // check append() examples</script>
</body>
</html>
미리보기
뒤에 요소가 추가되는 것을 보실 수 있습니다.
append() 함수와 완전히 동일한 기능을 하는 함수입니다. 단, Target과 Content의 위치가 다른다는 거네요. 잘 구분해서 사용하시던가 아니면 하나는 과감히 버리시는게 좋을것 같습니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 요소 제거, detach() (2) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 속성을 제어, css() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 복사하기, clone() (0) | 2011.11.22 |
| jQuery API 정복 - 앞에 추가하기, before() (1) | 2011.11.22 |
| jQuery API 정복 - 마지막 자식 요소 추가, append() (6) | 2011.07.20 |
| jQuery API 정복 - 뒤에 추가하기, after() (1) | 2011.07.14 |
| jQuery API 정복 - 범위로 자르기, slice() (0) | 2011.07.07 |
| jQuery API 정복 - 형제 요소들 찾기, siblings (0) | 2011.07.06 |