.append()

매개변수로 전달된 콘튼체를 엘리먼트 집합의 각 엘리먼트에 가장 마지막 자식으로 삽입한다.

.append(content)

.append(fuction)

.append(content)
 ◎ content : 엘리먼트에 삽입할 HTML 문자열이나 jQuery 객체, DOM 엘리먼트

.append(function)
 ◎ function : 엘리먼트에 삽입할 HTML 문자열을 반환하는 메서드


반환값

메서드 연쇄 호출을 지워하는 jQuery 객체


설명

.append()와 .appendTo() 메서드는 같은 동작을 수행. 두 메서드의 차이점은 문법에 있는데, 구체적으로 말해서 대상과 콘텐츠를 배치하는 순서에 있다. .append() 메서드는 매게변수로 전달된 콘텐츠를 대상 엘리먼트의 마지막 자식 노트로 삽입하고, .appendTo() 메서드는 매게변수에 따라 셀렉터 표현식으로 검색된 엘리먼트나 HTML 마크업으로 생성된 엘리먼트의 마지막 자식 노드로 대상 엘리먼트를 삽입한다.


코드

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

다음과 같은 식으로 여러 엘리먼트에 새로운 콘텐츠를 삽입할 수 있다.

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

그러면 각 내부 <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'));

이런 식으로 선택된 엘리먼트는 복사되지 않고 위치가 옮겨진다.

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

하지만 문서 내에 대상 엘리먼트가 하나 이상이면 각 대상 엘리먼트마다 삽입된 엘리먼트의 복사본이 생성된다.