jQuery / Method / .insertBefore() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
.insertBefore()
는 특정 요소 앞에 요소를 추가 또는 이동한다.
문법
p
요소 앞에<h1>Hello</h1>
를 추가한다.
$( '<h1>Hello</h1>' ).insertBefore( 'p' );
p
요소 앞으로h1
요소를 이동한다.
$( 'h1' ).insertBefore( 'p' );
예제 1
p
요소 앞에<h1>Hello</h1>
를 추가한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; font-size: 16px; } </style> <script src="//code.jquery.com/jquery-3.7.1.js"></script> <script> $( document ).ready( function() { $( '<h1>Hello</h1>' ).insertBefore( 'p' ); } ); </script> </head> <body> <p>World</p> </body> </html>
- 반영된 후의 코드는 다음과 같다.
<h1>Hello</h1> <p>World</p>
예제 2
p
요소 앞에<h1>Hello</h1>
를 추가한다.p
요소가 여러 개 있어도 다 추가된다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; font-size: 16px; } </style> <script src="//code.jquery.com/jquery-3.7.1.js"></script> <script> $( document ).ready( function() { $( '<h1>Hello</h1>' ).insertBefore( 'p' ); } ); </script> </head> <body> <p>World</p> <p>World</p> </body> </html>
예제 3
p
요소 앞으로h1
요소를 이동한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; font-size: 16px; } </style> <script src="//code.jquery.com/jquery-3.7.1.js"></script> <script> $( document ).ready( function() { $( 'h1' ).insertBefore( 'p' ); } ); </script> </head> <body> <p>World</p> <h1>Hello</h1> </body> </html>
참고
- A.after( B ) : A 뒤에 B 추가
- A.insertAfter( B ) : B 뒤에 A 추가
- A.before( B ) : A 앞에 B 추가
- A.insertBefore( B ) : B 앞에 A 추가