-
초보자도 쉽게 이해하는 jQuery 문법_태그 및 요소 추가하기_ .append() .prepend() .before() after()_(1)Study/JavaScript 2023. 3. 25. 02:33반응형
jQuery가 많이 없어지는 추세라고 하지만 금융권에서는 여전히 많이 사용하기도 하고
한번 익혀두면 편리하기에 공부하게 되었슴
특히 플젝에서 많이 사용하게 되는 html태그 추가나 요소를 추가할 경우 많이 쓰는걸 정리해 두었음
참고로 jQuery를 쓸 때 아래의 모양이 기본 형태임
$("지정하고자하는 html태그 또는 id 또는 class 등의 선택자").함수이름("선택자에 추가하고자 하는 내용");또한 jQuery를 쓸 때 head 태그안에 아래 링크를 넣어줘야 jQuery를 쓸수 있다.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>(1) .append()
선택자 뒤에 추가하고자 하는 내용을 넣어줄때 사용함.
<!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-1.12.4.min.js"></script> </head> <body> <oi id="list"> <li>첫 번째</li> <li>두 번째</li> </oi> </body> <script type="text/javascript"> $("#list").append("<div>추가 함</div>"); </script> </html>아래 결과화면을 보면 선택자인 #list 밑에 div태그가 추가 됨. (참고로 선택자의 태그인 oi 의 자식태그가 되어 맨 뒤 순서에 위치 함)
(2) .prepend()
선택자 앞에 추가하고자 하는 내용을 넣어줄때 사용 함
<!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-1.12.4.min.js"></script> </head> <body> <oi id="list"> <li>첫 번째</li> <li>두 번째</li> </oi> </body> <script type="text/javascript"> $("#list").prepend("<div>추가 함</div>"); </script> </html>아래 결과화면을 보면 선택자인 #list 앞에 div태그가 추가 됨.(참고로 선택자의 태그인 oi 의 자식태그가 되어 맨 앞 순서에 위치 함)
(3) .before()
선택자앞에 추가하고자 하는 내용을 넣어줄때 사용
<!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-1.12.4.min.js"></script> </head> <body> <oi id="list"> <li>첫 번째</li> <li>두 번째</li> </oi> </body> <script type="text/javascript"> $("#list").before("<div>추가 함</div>"); </script> </html>아래 결과화면을 보면 선택자인 #list 앞에 div태그가 추가 됨.
그렇다면 prepand 와 같다고 생각할 수 있는데 before는 선택자의 태그인 oi 위쪽에 태그가 붙음.
즉 위치가 엄연히 다름 비교해 보시길!
(4) .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-1.12.4.min.js"></script> </head> <body> <oi id="list"> <li>첫 번째</li> <li>두 번째</li> </oi> </body> <script type="text/javascript"> $("#list").after("<div>추가 함</div>"); </script> </html>아래 결과화면을 보면 선택자인 #list 뒤 에 div태그가 추가 됨.
그렇다면 append와 같다고 생각할 수 있는데 이것 또한 after는 선택자의 태그인 oi 뒤쪽에 태그가 붙음.
즉 붙는 위치가 다름!
반응형'Study > JavaScript' 카테고리의 다른 글
var 와 let 둘 중 뭐를 써야 될까?? (0) 2023.08.04 초보자도 쉽게 이해하는 jQuery 문법_태그 및 요소 추가하기_ .wrap() .wrapAll() .html() .text()_(2) (0) 2023.03.26 alert창 UI를 바꾸기(sweetAlert 적용하여 예쁜 알림UI사용 하기) (0) 2023.03.22 초보자도 간단하게 스프링으로 만드는 파일업로드 기능(spring file upload) (0) 2023.03.16 초보자를 위한 html요소 삭제하기 .remove().empty() .unwrap() (0) 2023.03.15