-
JQuery로 DOM 다루기 - 기존 요소 추가카테고리 없음 2022. 10. 24. 20:25728x90
선택한 요소를 기준으로 위 아래로 새로운 요소를 추가 할 수 있는 메소드를 알아보자.
종류 설명 before() 선택한 요소의 바로 앞에 새로운 요소나 컨텐츠를 추가 insertBefore() before() 메소드와 같지만 소스와 타겟의 위치가 서로 반대 after() 선택한 요소의 바로 뒤에 새로운 요소나 컨텐츠를 추가 insertafter() after() 메소드와 같지만 소스와 타겟의 위치가 서로 반대 요소 추가 예제를 확인해보자
<!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(){ $('#btn1').on('click',function(){ $('#firstRow').before('<tr><td>이순신</td><td>초대되어 너무 기쁘네요</td></tr>'); }); $('#btn2').on('click',function(){ $('#firstRow').after('<tr><td>유관순</td><td>오늘도 좋을 하루 보내세요</td></tr>'); }); }); </script> </head> <body> <table border="1" width="320"> <colgroup> <col width=100> <col width=200> </colgroup> <tr id="firstRow"> <td>홍길동</td> <td>반갑습니다</td> </tr> </table> <p><button id="btn1">행 위로 인사말 추가</button> <button id="btn2">행 아래로 인사말 추가</button></p> </body> </html>
기본 결과 화면 
행 위로 인사말 추가 
행 아래로 인사말 추가 728x90