.append()
원문 링크 
http://api.jquery.com/append/
개요 : 어떤 요소에 마지막 자식 요소를 새로 추가합니다.
- .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 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 속성을 제어, css() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 요소 복사하기, clone() (0) | 2011.11.22 |
| jQuery API 정복 - 앞에 추가하기, before() (1) | 2011.11.22 |
| jQuery API 정복 - 새로운 요소 추가, appendTo() (4) | 2011.07.26 |
| jQuery API 정복 - 뒤에 추가하기, after() (1) | 2011.07.14 |
| jQuery API 정복 - 범위로 자르기, slice() (0) | 2011.07.07 |
| jQuery API 정복 - 형제 요소들 찾기, siblings (0) | 2011.07.06 |
| jQuery API 정복 - 이전에 있는 것들, prevAll() (0) | 2011.07.05 |