jQuery API 정복 - 새로운 요소 추가, appendTo()

.appendTo()

원문 링크 http://api.jquery.com/appendTo/

.appendTo( target )Returns : jQuery

개요 : 새로운 요소를 타겟(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 에 있는 내용임을 밝힙니다.

Comment List

  1. 전우광 2011.09.28 17:14
    올려주신 글들 정독을 하며 공부를 하고 있습니다.
    현재 회사에서 JQUERY 관련해서 작업을 진행중인데 뒷부분은 포스팅 된 글을 참고삼아 진행을 했습니다. 하지만 앞부분에 추가하는 부분에 대해서 고민중인데 혹시 알고 계시다면 죄송하지만 포스팅 한번 해주실 수 있으신가요?
    • Favicon of https://findfun.tistory.com jyhyun 2011.11.22 15:21 신고
      후.. 이미 많이 늦어버렸네요.
      앞쪽에 추가하는 함수를 새로 올리긴 했는데요. 이미 많이 늦어버렸겠네요.
      감사합니다.
  2. Danny B 2011.11.21 07:08
    좋은 기사 감사합니다

Write Comment