2021-05-20 09:18:34

오늘은 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 이용해서 무한 스크롤 기능 가진 도서 검색 웹 페이지 만들기"를 한 번 읽어보시면 도움이 되실 것입니다. 

 

관련 글

카카오 책 검색 API 이용해서 무한 스크롤 기능 가진 도서 검색 웹 페이지 만들기

[jquery] html 메서드 정리