jQuery API 정복 - 마지막 자식 요소 추가, append()

.append()

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

.append( content, [content] )Returns : jQuery

개요 : 어떤 요소에 마지막 자식 요소를 새로 추가합니다.

  • .append( content, [content] )
  • content 추가될 HTML 문자열, DOM 요소, 또는 jQuery 객체.
  • content 추가될 하나 이상 복수개의 DOM 요소들, 요소 배열, HTML 문자열들, 또는 jQuery 객체들.
  • .append( function(index, html) )
  • function(index, html) 선택된 요소 집합의 각 요소 별로 추가될 HTML 문자열을 반환해주는 함수. 집합을 구성하는 요소들의 인덱스를 인자로 받을 수 있습니다.

.append() 함수는 jQuery 집합(collection)의 각 요소별로 마지막 자식 요소를 추가해주는 함수입니다. (first 자식 요소를 추가하려면 .prepend()를 사용하세요).

.append().appendTo() 함수의 기능은 동일합니다. 컨텐츠(content-추가될자식요소)와 타겟(target-추가될부모요소)의 위치에 대한 부분이 중요한 차이점입니다. .append() 함수는 함수 앞의 선택자 표현으로 컨테이너(container)를 구성된 타겟에 컨텐츠를 추가합니다. 반면 .appendTo() 함수는 컨텐츠가 함수 앞에 위치하고 타겟이 뒤에 위치하게 됩니다.

음.. 이 부분은 해석을 해놓아도 잘 모르겠어서 패스하려다가 구성해서 넣었습니다. 나중에 apprendTo() 함수가 나오게 된다면 더 명확해 지겠지만 위 글의 본질은 결과는 같지만 그 사용법이 다르다는 거네요. 즉, append함수는 A.append(B)라면 A에 B를 추가하는 것이고 A.appendTo(B)는 B에 A를 추가하는 겁니다. 아주 쉽죠~~. 하하;;(사실 이 부분은 appendTo()함수를 보고 알게 됬습니다. ^^;;)

아래 예제를 보시죠.

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

여러 요소에 한번에 컨텐츠를 추가해 보겠습니다.

$('.inner').append('<p>Test</p>');

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>

이번에는 요소를 선택해서 추가하는 방법을 보겠습니다.

$('.container').append($('h2'));

만약 위와같이 요소를 선택해서 새로운 컨텐츠를 추가했다면 타겟 요소안으로 이동되게 됩니다.(복사되지 않습니다.) 아래처럼 h2 태그가 이동된 것을 보실 수 있습니다.

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

다수의 인자들(Additional Arguments)

컨텐츠를 추가하는 함수로는 .prepend(), .before(), .append() 등이 있으며 인자를 여러개 가질 수 있는 것도 비슷합니다. 인자로 올 수 있는 것들은 DOM 요소들, jQuery 객체들, HTML 문자열들, 그리고 DOM 요소들의 배열들이 있습니다.

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');
 
$('body').append($newdiv1, [newdiv2, existingdiv1]);

3가지 방법으로 <div> 를 만들어서 .append() 함수에 다수의 인자로 넘길 수 있습니다. $('body').append($newdiv1, newdiv2, existingdiv1)과 같은 방법으로 말이죠.

예 제  
모든 p 태그에 HTML 로 마지막 자식요소를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>I would like to say: </p>
<script>
  $("p").append("<strong>Hello</strong>");
</script>
 
</body>
</html>

미리보기

와우 넘 쉬워서 말씀드릴것도 없어요.

 

예 제  
모든 p 태그에 요소를 마지막 자식요소를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>I would like to say: </p>
 
<script>
  $("p").append(document.createTextNode("Hello"));
</script>
 
</body>
</html>

미리보기

이것도 뭐~

 

예 제  
모든 p 태그에 jQuery 객체 (DOM 요소 배열도 마찬가지) 마지막 자식요소를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <strong>Hello world!!!</strong><p>I would like to say: </p>
<script>
  $("p").append( $("strong") );
</script>
 
</body>
</html>

미리보기

strong태그가 옯겨간거 확인되시죠?? 참 신기합니다.

 

append라는 함수는 어느 프로그래밍 언어를 봐도 있는거 같습니다. 대충 뭐 있겠지 하며 다 있는 함수이니 잘 익혀두셔도 좋겠네요. 그럼 휘리릭

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

저작자 표시 비영리 변경 금지
신고
  1. Favicon of http://goleemw1.tistory.com BlogIcon 멀바띠 2013.02.01 12:24 신고

    감사합니다:)

  2. 안녕하세요 2014.05.23 10:43 신고

    담아갈게요~~~

+ Recent posts

티스토리 툴바