jQuery append() 메소드 완벽 가이드: 기본 사용법부터 실전 예제까지

jQuery란 무엇인가?

jQuery는 개발자가 단 몇 줄의 코드만으로 DOM 조작, 이벤트 핸들링, 애니메이션 효과, AJAX 요청 등을 손쉽게 구현할 수 있도록 도와주는 대표적인 JavaScript 라이브러리입니다. 이러한 작업은 jQuery API 고유의 셀렉터(selector)와 메소드(method)를 통해 가능해지는데, 그중 하나가 바로 append() 메소드입니다.

jQuery append() 메소드란?

append() 메소드는 HTML 문자열, 일반 텍스트, 배열, DOM 요소, 또는 다른 jQuery 객체 등 하나 이상의 '콘텐츠'를 인자로 받아, 셀렉터와 일치하는 모든 요소의 맨 끝에 해당 콘텐츠를 추가(append)하는 기능을 합니다.

대표적인 활용 사례로는 리스트의 마지막에 새 항목을 추가하는 경우(예: 할 일 목록에 새로운 할 일 추가하기)나, 버튼 클릭 시 새로운 콘텐츠를 화면에 보여주는 경우 등이 있습니다. 그럼 지금부터 예제 코드를 통해 append()의 동작 방식을 자세히 살펴보겠습니다.

jQuery append() 사용 방법

앞서 언급한 '할 일 목록(to do list)' 예제를 활용해, append()가 셀렉터를 어떻게 호출하고 일치하는 요소들에 콘텐츠를 삽입하는지 확인해 보겠습니다.

먼저 기본적인 할 일 목록을 만드는 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>To Do List</h2>
<ol class="list1">
<li>Read Chapters 1 & 2 </li>
<li>Meeting at 3:00pm</li>
<li>Write about yesterday's reading</li>
</ol>
</body>
</html>

주의할 점: HTML 페이지에서 jQuery를 사용하려면 반드시 <head> 영역 안에 <script> 태그를 통해 jQuery API 주소를 포함시켜야 합니다. 이것이 누락되면 해당 페이지에서 jQuery 기능을 전혀 사용할 수 없습니다.

위 코드를 실행하면 아래와 같이 할 일 목록이 화면에 잘 나타납니다.

jQuery append() 메소드 완벽 가이드: 기본 사용법부터 실전 예제까지

오늘은 뭔가 생산적인 하루를 보내고 싶으니, 목록 맨 끝에 새 항목을 하나 추가해 볼까요? 저녁 식사 계획을 추가하는 건 어떨까요?

HTML 구조를 살펴보면 순서 있는 목록(<ol>)에 list1이라는 클래스가 지정되어 있습니다. 덕분에 이 클래스명만으로 목록 전체를 선택할 수 있습니다. <body> 하단에 다음과 같이 <script> 태그를 추가해 보겠습니다.

<script>
 $(document).ready( () => {
   $(".list1").append("<li>Make dinner plans</li>")
 })
</script>

<script> 태그 안에 보이는 $ 기호가 바로 강력한 jQuery 셀렉터입니다. $ 함수에 요소명, 클래스명, id명 등을 인자로 전달하면 DOM 내의 해당 요소를 선택할 수 있습니다. 위 예제에서는 list1 클래스를 가진 요소, 즉 <ol> 전체를 선택했습니다.

또한 $(document) 셀렉터는 문서 전체를 선택하며, 여기에 ready() 메소드를 호출하면 페이지가 완전히 로드된 후에야 다음 코드가 실행되도록 보장합니다. 이를 통해 코드가 순차적으로 안정적으로 동작하게 됩니다.

ready()의 콜백 함수 내부에서는 list1 클래스를 가진 모든 요소를 선택하고, append()에 전달된 <li> 요소를 닫는 태그인 </ol> 바로 앞에 삽입합니다. 따라서 페이지 로드가 완료되면 'Make dinner plans' 항목이 할 일 목록 맨 끝에 자동으로 추가됩니다.

정상적으로 추가되었습니다! 이번에는 또 다른 예제를 살펴보겠습니다. 버튼을 클릭했을 때 새로운 콘텐츠를 화면에 표시하는 기능입니다.

jQuery append() 실전 예제: 버튼 클릭으로 콘텐츠 추가하기

웹 페이지에 버튼이 있고, 이 버튼을 클릭했을 때 새로운 콘텐츠를 표시하고 싶다고 가정해 봅시다. 페이지를 새로고침하거나 다른 페이지로 이동하지 않고 즉시 콘텐츠를 보여준다면 사용자 경험이 훨씬 더 좋아질 것입니다.

바로 이 지점에서 jQuery의 진가가 드러납니다. append()를 활용하면 새로고침이나 리다이렉션 없이 버튼 클릭만으로 새 콘텐츠를 화면에 나타낼 수 있습니다.

기본이 되는 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="content">
  <p>Hello World!</p>
</div>
<button id="btn-main">Click Me!</button>
</body>
</html>

앞선 할 일 목록 예제와 비슷하지만, 이번에는 버튼이 하나 추가되었습니다.

이제 배운 내용을 활용해, 버튼이 클릭되면 "Hello World!" 아래에 새로운 콘텐츠를 추가해 보겠습니다.

<script>
  $(document).ready( () => {
    $("#main-btn").click( () => {
      $("p").append("<b>Goodbye</b>")
    })
  })
</script>

역시 <body> 끝부분에 <script> 태그를 배치했고, 할 일 목록 예제와 마찬가지로 문서 로딩이 완료될 때까지 기다린 후에 나머지 코드가 실행됩니다.

문서가 로드되면 이제 버튼을 클릭할 수 있으며, 클릭 시 해당 버튼에 click() 메소드가 호출됩니다. 그러면 <p> 태그가 선택되고, HTML 문자열인 <b>Goodbye</b>를 인자로 하는 append() 메소드가 실행됩니다. 그 결과 Goodbye라는 단어가 굵은 글씨(bold)로 <p> 태그의 맨 끝에 삽입됩니다.

최종 출력 결과는 다음과 같습니다.

<div class="content">
 <p>Hello World.</p><b>Goodbye</b>.
</div>

<button id="btn-main">Click Me</button>

화면상으로는 아래와 같이 표시됩니다.

만약 Goodbye를 <p> 태그가 아닌 <div>의 맨 끝에 추가하고 싶다면 어떻게 해야 할까요? 간단합니다. 셀렉터를 p에서 content 클래스로 변경하기만 하면 됩니다.

<script>
  $(document).ready( () => {
    $("#main-btn").click( () => {
      $(".content").append("<b>Goodbye</b>")
    })
  })
</script>

이렇게 수정하면 결과는 다음과 같이 표시됩니다.

마무리

지금까지 append() 메소드가 단독으로 어떻게 동작하는지, 그리고 일련의 콜백 함수 안에서 어떻게 활용되는지 살펴보았습니다.

<script> 태그 안에 jQuery 셀렉터와 메소드를 작성하는 것만으로도, jQuery 셀렉터와 일치하는 모든 요소의 끝에 다양한 유형의 콘텐츠를 손쉽게 추가할 수 있습니다. append() 메소드를 활용하면 페이지 리다이렉션이나 새로고침 없이도 원하는 시점에 사용자에게 새로운 콘텐츠를 동적으로 보여줄 수 있는 무한한 가능성이 열립니다.