append 메서드
append 메서드는 요소의 끝에
텍스트를 추가합니다. 유사한 방식으로 작동하는
appendTo
메서드도 존재합니다.
구문
요소 끝에 텍스트 삽입:
$(selector).append(text);
선택된 요소의 끝에 사용자 정의 함수가 반환한 텍스트를 추가할 수 있습니다. 이 함수는 선택된 각 요소마다 개별적으로 호출됩니다. 호출 시 다음 매개변수가 전달됩니다: 세트 내의 요소 위치, 요소의 현재 내용:
$(selector).append(function(index, currentContent));
내용은 일반 텍스트뿐만 아니라 DOM 요소나 jQuery 객체일 수도 있습니다. 이 경우 해당 요소들은 HTML 코드 내의 원래 위치에서 이동됩니다.
예제
주어진 단락 끝에 텍스트를 삽입해 보겠습니다:
<p id="test">text</p>
$('#test').append('!!!');
HTML 코드는 다음과 같이 변합니다:
<p id="test">text!!!</p>
예제
주어진 단락 끝에 태그가 포함된 텍스트를 삽입해 보겠습니다:
<p id="test">text</p>
$('#test').append('<b>!!!</b>');
HTML 코드는 다음과 같이 변합니다:
<p id="test">text<b>!!!</b></p>
예제
모든 단락을 찾아 각각의 끝에 세트 내 순서 번호를 추가해 보겠습니다:
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
$('p').append(function(index, text){return index;});
HTML 코드는 다음과 같이 변합니다:
<p>text0</p>
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
