bskyvision RSS 태그 관리 글쓰기 방명록
2021-05-20 09:18:34
728x90

오늘은 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 메서드 정리

댓글

방문해주신 모든 분들을 환영합니다.

* 글을 읽던 중에 궁금했던 부분은 질문해주세요.

* 칭찬, 지적, 의문, 격려, 감사표현 등을 남겨주세요.

* 최대한 답변 드리도록 노력하겠습니다.

* 욕설과 광고를 담은 댓글은 가차없이 삭제합니다.


  1. BlogIcon 꼬장스카이비전@2021.05.20 10:58 ~$ 저는 꼬장스카이비전입니다. [댓글주소]  [수정/삭제]  [답글작성]
guest@이름 ~$
guest@패스워드 ~$
guest@홈페이지주소작성 ~$

guest@댓글작성 ~$




bskyvision. Designed by bskyvision.