before 메서드
before 메서드는 지정된 요소 앞에 텍스트를
추가합니다. 유사한 방식으로 동작하는
insertBefore
메서드도 있습니다.
구문
요소 앞에 텍스트 삽입:
$(selector).before(text);
다음과 같이 선택된 요소 앞에 사용자 정의 함수가 반환하는 텍스트가 추가됩니다:
$(selector).before(function(indexInSet));
함수를 사용하는 또 다른 방법으로, 두 번째 매개변수에는 요소의 기존 HTML 값이 지정됩니다:
$(selector).before(function(indexInSet, htmlString));
텍스트는 일반 텍스트뿐만 아니라 DOM 요소나 jQuery 객체도 될 수 있습니다. 이 경우 해당 요소는 HTML 코드 내의 원래 위치에서 이동됩니다.
예제
지정된 단락 앞에 텍스트를 삽입해 봅시다:
<p id="test">text</p>
$('#test').before('!!!');
HTML 코드는 다음과 같이 변합니다:
!!!<p id="test">text</p>
예제
지정된 단락 앞에 태그가 있는 텍스트를 삽입해 봅시다:
<p id="test">text</p>
$('#test').before('<p>!!!</p>');
HTML 코드는 다음과 같이 변합니다:
<p>!!!</p><p id="test">text</p>
예제
하나의 단락을 다른 단락 위에 배치해 봅시다(즉, 단락을 원래 위치에서 잘라내어 새 위치에 놓습니다):
<p id="p1">text1</p>
<p id="p2">text2</p>
$('#p2').before('#p1');
HTML 코드는 다음과 같이 변합니다:
<p id="p2">text2</p>
<p id="p1">text1</p>
같이 보기
-
지정된 요소 앞에 텍스트를 추가하는
insertBefore메서드 -
페이지의 특정 위치에 콘텐츠를 추가할 수 있는
after,append,prepend메서드들 -
선택된 요소의 복사본을 만드는
clone메서드
