jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
개요
.after()
는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다.
문법
- 문법은 다음과 같다.
.after( content [, content ] )
- 예를 들어 다음은
h1
요소 뒤에 Hello를 내용으로 갖는p
요소를 추가한다.
$( 'h1' ).after( '<p>Hello</p>' );
- 다음은 클래스 값으로
a
를 갖는h1
요소 뒤에 클래스 값으로b
를 갖는p
요소를 이동시킨다.
$( 'h1.a' ).after( $( 'p.b' ) );
예제 1
h1
요소 뒤에 Hello World!를 내용으로 갖는p
요소를 추가한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'h1' ).after( '<p>Hello World!</p>' ); } ); </script> </head> <body> <h1>Lorem ipsum dolor.</h1> </body> </html>
예제 2
h1
요소 앞에 있던p
요소를h1
요소 뒤로 이동시킨다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'h1' ).after( $( 'p' ) ); } ); </script> </head> <body> <p>Goodbye World!</p> <h1>Lorem ipsum dolor.</h1> </body> </html>
참고
- 선택한 요소 앞에 요소를 추가하거나 이동시키는 것은
.before()
로 한다.