-
JQuery로 DOM 다루기 - 요소 추가프로그래밍/JQuery 2022. 10. 23. 09:36728x90
요소를 추가 할 수 있는 메소드를 알아보자.
종류 설명 append() 선택한 요소의 하위 요소 마지막에 새로운 요소나 컨텐츠를 추가 appendTo() append() 메소드와 같지만 소스의 타켓의 위치가 서로 반대 prepend() 선택한 요소의 하위 요소 처음에 새로운 요소나 컨텐츠를 추가 prependTo() prepend() 메소드와 같지만 소스의 타켓의 위치가 서로 반대 $('선택자').append('요소'); $('요소').appendTo('선택자'); // 요소와 선택자의 위치를 바꿔서 표현도 가능하다.<!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(){ $('#app').on('click', function(){ $('#list').append('<li>오늘 멋진 하루입니다</li>'); }); $('#pre').on('click', function(){ $('#list').prepend('<li>안녕하세요 반가워요</li>'); }); }); </script> </head> <body> <ul id="list"> <li>안녕하세요</li> <li>반갑습니다</li> <li>좋은 하루 보내세요</li> </ul> <button id="app">(마지막부터)방명록 추가</button> <button id="pre">(1번부터)방명록 추가</button> </body> </html>
기본 결과 화면 
(마지막부터)방명록 추가 버튼 클릭시 
(1번부터)방명록 추가 버튼 클릭시 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
JQuery로 DOM 다루기 - 요소 복제 (0) 2022.10.26 JQuery로 DOM 다루기 - 요소 포함 (0) 2022.10.25 메소드 체이닝(Method Chaining) (0) 2022.10.22 요소 접근 메소드 (0) 2022.10.19 선택자 (0) 2022.10.18