오늘은 jquery의 html() 메서드와 함께 아주 많이 사용되는 append() 메서드에 대해 살펴보도록 하겠습니다. append() 메서드는 선택한 요소 내 마지막 부분에 append 함수 내에 전달해준 요소를 생성해줍니다. 백문이 불여일견이라고 한 번 어떻게 사용되는지 보시죠.
$(선택한 요소).append(새 요소)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--제이쿼리-->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<div id="test">
<h1>안녕하세요.</h1>
</div>
<script>
$('#test').click(function(){
$('#test').append('<h2>저는 비스카이비전입니다.</h2>');
});
</script>
</body>
</html>
|
cs |
저는 test라는 아이디를 가진 요소를 클릭하면 "저는 비스카이비전입니다."라는 문구가 그 아래에 추가되도록 코드를 짜봤습니다. 브라우저에서 이 html 문서를 열어보겠습니다.
이제 "안녕하세요." 부분을 클릭해보겠습니다. 그러면 다음과 같이 아래 "저는 비스카이비전입니다."가 추가됩니다.
한번 F12 크롬 개발자 도구를 열어서 실제로 코드가 어떻게 변했는지 살펴보겠습니다.
여기서 보시면 <h2>저는 비스카이비전입니다.</h2>가 아이디 test의 마지막 부분에 추가된 것을 확인하실 수 있습니다.
test 요소를 또 한 번 클릭해볼까요?
한 줄 더 추가되었습니다.
이제 append() 메서드의 사용법 잘 아시겠죠? append() 메서드를 잘 활용하면 무한 스크롤과 같은 기능도 만들어 낼 수 있습니다. 아래 관련 글의 "카카오 책 검색 API 이용해서 무한 스크롤 기능 가진 도서 검색 웹 페이지 만들기"를 한 번 읽어보시면 도움이 되실 것입니다.
관련 글
'Dev > javascript' 카테고리의 다른 글
| [jquery] 체크박스 체크 여부 확인하기 (2) | 2022.02.22 |
|---|---|
| [javascript] 오늘 날짜를 yyyy-MM-dd 형식으로 나타내기 (0) | 2022.02.21 |
| [jquery] before() 메소드와 after() 메소드 사용법 (2) | 2021.05.24 |
| [javascript] 몫과 나머지 구하기 (1) | 2021.05.22 |
| [javascript] 문자열을 정수형 또는 실수형으로 변환하려면, parseInt(), parseFloat() (2) | 2021.05.19 |
| [javascript] 문자열과 배열의 길이를 알려주는 length 속성 (0) | 2021.03.26 |
| [jquery] 열려있는 팝업 사이드바 외부 영역 클릭시 닫히게 하기 (6) | 2021.02.11 |
| [javascript] Math 객체를 이용해서 반올림, 올림, 내림하기 (0) | 2020.12.17 |