prepend 메서드
prepend 메서드는 요소의 시작 부분에
텍스트를 추가합니다. 유사한 방식으로 동작하는
prependTo
메서드도 존재합니다.
구문
요소의 시작 부분에 텍스트 삽입하기:
$(선택자).prepend(텍스트);
선택된 요소들의 시작 부분에 사용자 정의 함수가 반환한 텍스트를 추가할 수 있습니다. 이 함수는 선택된 각 요소마다 개별적으로 호출됩니다. 호출 시 다음 매개변수가 전달됩니다: 집합 내 요소의 위치, 요소의 현재 내용:
$(선택자).prepend(function(집합 내 번호, 요소의 현재 내용));
내용은 일반 텍스트뿐만 아니라 DOM 요소나 jQuery 객체일 수도 있습니다. 이 경우 해당 요소들은 HTML 코드 내 자신의 위치에서 이동됩니다.
예시
주어진 단락의 시작 부분에 텍스트를 삽입해 봅시다:
<p id="test">text</p>
$('#test').prepend('!!!');
HTML 코드는 다음과 같이 바뀝니다:
<p id="test">!!!text</p>
예시
주어진 단락의 시작 부분에 태그가 있는 텍스트를 삽입해 봅시다:
<p id="test">text</p>
$('#test').prepend('<b>!!!</b>');
HTML 코드는 다음과 같이 바뀝니다:
<p id="test"><b>!!!</b>text</p>
예시
모든 단락을 찾아 각각의 시작 부분에 집합 내 순서 번호를 넣어 봅시다:
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
$('p').prepend(function(index, text) {
return index;
});
HTML 코드는 다음과 같이 바뀝니다:
<p>0text</p>
<p>1text</p>
<p>2text</p>
<p>3text</p>
<p>4text</p>
