웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
jQuery 메소드중 하나인 insertAfter()에 대하여 알아보자. insertAfter()가 어떤 기능과 특징이 있는지 알아보고 after() 메소드와는 무엇이 다른지도 알아보겠다. 먼저 아래는 insertAfter()가 무엇인지 설명한 내용이다.
insertAfter() 메소드를 사용하면 선택한 대상 요소를 원하는 위치의 다음 영역으로 이동시키는 메소드이다. 이는 after() 함수와 거의 동일하나 문법의 사용방법에만 차이가 있다. 우선 insertAfter()를 사용한 예제를 보면 더 쉽게 이해가 될 것이다. 아래의 예제소스를 보자.
만약 어떤 span 태그를 p 태그 다음에 오도록 만들려면 아래의 예제처럼 코드를 작성할 수 있을 것이다.
이 코드를 실행할 경우 어떻게 될까? 아래처럼 span 태그가 p태그 다음에 위치하게 될 것이다. 아래는 이를 나타낸 html 코드이다
앞에도 언급했지만 둘 다 원하는 기능을 수행할 수 있는 점은 동일하나 문법적 차이가 있다. 즉 이동의 target인 대상 요소가 문법 어디에 속하느냐가 차이점인 것이다. 만약 맨 위의 예제소스를 after() 코드를 사용하여 동일하게 구현한다면 아래와 같다.
위 코드처럼 insertAfter()와 after()를 사용하면 동일한 기능을 수행하는 코드를 만들 수 있다.
insertAfter() 메소드를 사용하면 선택한 대상 요소를 원하는 위치의 다음 영역으로 이동시키는 메소드이다. 이는 after() 함수와 거의 동일하나 문법의 사용방법에만 차이가 있다. 우선 insertAfter()를 사용한 예제를 보면 더 쉽게 이해가 될 것이다. 아래의 예제소스를 보자.
! insertAfter() 예제소스 보기
만약 어떤 span 태그를 p 태그 다음에 오도록 만들려면 아래의 예제처럼 코드를 작성할 수 있을 것이다.
<p>테스트 코드입니다.</p>
<script>
$('<span>Span Tag!! </span>').insertAfter('p');
</script>
<script>
$('<span>Span Tag!! </span>').insertAfter('p');
</script>
이 코드를 실행할 경우 어떻게 될까? 아래처럼 span 태그가 p태그 다음에 위치하게 될 것이다. 아래는 이를 나타낸 html 코드이다
<p>테스트 코드입니다.</p>
<span>Span Tag!!</span>
// 이를 실행할 경우 결과는 다음과 같을 것입니다.
테스크 코드입니다.
Span Tag!!
<span>Span Tag!!</span>
// 이를 실행할 경우 결과는 다음과 같을 것입니다.
테스크 코드입니다.
Span Tag!!
! insertAfter() 그리고 after() 태그와의 차이점은?
앞에도 언급했지만 둘 다 원하는 기능을 수행할 수 있는 점은 동일하나 문법적 차이가 있다. 즉 이동의 target인 대상 요소가 문법 어디에 속하느냐가 차이점인 것이다. 만약 맨 위의 예제소스를 after() 코드를 사용하여 동일하게 구현한다면 아래와 같다.
<script>
$('p').after($("<span>Span Tag!! </span>"));
</script>
$('p').after($("<span>Span Tag!! </span>"));
</script>
위 코드처럼 insertAfter()와 after()를 사용하면 동일한 기능을 수행하는 코드를 만들 수 있다.
아래의 글도 찾고 계시지 않나요?
