-
jQuery - replaceWith()jQuery 2020. 6. 23. 18:13
.replaceWith()
- 선택한 요소를 다른 것으로 바꿉니다.
문법
.replaceWith( newContent )예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다.
$( 'h1' ).replaceWith( 'abc' );h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다.
newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어
$( 'h1' ).replaceWith( $( 'p.a' ) );는 h1 요소를 클래스 값이 a인 p 요소로 바꿉니다.
예제1
- 버튼을 클릭하면 h1요소를 <p>Ipsum</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() { $( 'button' ).click( function() { $( 'h1' ).replaceWith( '<p>Ipsum</p>' ); } ); } ); </script> </head> <body> <h1>Lorem</h1> <button>Replace</button> </body> </html>
예제2
- 버튼을 클릭하면 h1요소를 abc 클래스 값으로 가지는 요소로 바꾼다.
<!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() { $( 'button' ).click( function() { $( 'h1' ).replaceWith( $( '.abc' ) ); } ); } ); </script> </head> <body> <h1>Lorem</h1> <p>Ipsum</p> <p class="abc">Dolor</p> <button>Replace</button> </body> </html>
'jQuery' 카테고리의 다른 글
jQuery - .scrollTop() (0) 2020.06.23 jQuery - .resize() (0) 2020.06.23 jQuery - .prop() (0) 2020.06.23 jQuery - .parent() (0) 2020.06.23 jQuery - .offset() (0) 2020.06.23