-
JQuery로 DOM 다루기 - 요소 대체프로그래밍/JQuery 2022. 10. 27. 22:22728x90
요소를 대체하는 방법으로 replaceAll() 메소드를 사용하면 선택한 요소를 지정된 요소로 대체할 수 있다. replaceAll()의 매개 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달 받을 수 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>요소의 대체</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script> $(function(){ $('button').on('click', function(){ $('#firstItem').replaceAll('.item'); // 모든 item 요소를 firstItem요소로 대체한다. }); }); </script> </head> <body> <ul id="list"> <li class="item" id="firstItem">첫번째 아이템</li> <li class="item" id="secondItem">두번째 아이템</li> <li class="item" id="thirdItem">세번째 아이템</li> </ul> <button>아이템 대체</button> </body> </html>
기본 결과 화면 
아이템 대체 버튼 클릭시 결과 화면 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
조상요소 탐색 (0) 2022.10.28 JQuery로 DOM 다루기 - 요소 삭제 (0) 2022.10.27 JQuery로 DOM 다루기 - 요소 복제 (0) 2022.10.26 JQuery로 DOM 다루기 - 요소 포함 (0) 2022.10.25 JQuery로 DOM 다루기 - 요소 추가 (0) 2022.10.23