[jQuery] 12. append(), prepend() 사용법

지난 글에서는 jQuery의 slideDown(), slideUp(), slideToggle()을 사용해서 요소를 접고 펼치는 방법을 알아봤습니다.

이번 글에서는 HTML 요소 안에 새로운 내용을 추가할 때 사용하는 append()와 prepend()에 대해 알아보겠습니다.

append()와 prepend()는 게시글 목록, 댓글 목록, 알림 목록, 장바구니 목록처럼 화면에 새로운 항목을 추가할 때 자주 사용하는 jQuery 메서드입니다.

1. append(), prepend()란?

jQuery에서 선택한 요소 안에 새로운 내용을 추가할 때 append()와 prepend()를 사용할 수 있습니다.

append() : 선택한 요소의 안쪽 맨 뒤에 내용을 추가합니다.
prepend() : 선택한 요소의 안쪽 맨 앞에 내용을 추가합니다.

둘 다 새로운 요소를 추가한다는 점은 같지만, 추가되는 위치가 다릅니다.

$("#box").append("뒤에 추가");
$("#box").prepend("앞에 추가");

2. append() 기본 사용법

append()는 선택한 요소 안쪽의 마지막 부분에 내용을 추가합니다.

📌 기본 문법

$("선택자").append("추가할 내용");

📌 예제 코드

<div id="box">
  기존 내용
</div>

<button id="appendBtn">뒤에 추가</button>

<script>
  $("#appendBtn").click(function() {
    $("#box").append("<p>새로운 문장입니다.</p>");
  });
</script>

📌 실행 결과

처음에는 div 안에 "기존 내용"이 표시됩니다.
뒤에 추가 버튼을 클릭합니다.
기존 내용 아래쪽에 새로운 문장이 추가됩니다.
버튼을 여러 번 누르면 문장이 계속 뒤에 추가됩니다.

3. prepend() 기본 사용법

prepend()는 선택한 요소 안쪽의 가장 앞부분에 내용을 추가합니다.

📌 기본 문법

$("선택자").prepend("추가할 내용");

📌 예제 코드

<div id="box">
  기존 내용
</div>

<button id="prependBtn">앞에 추가</button>

<script>
  $("#prependBtn").click(function() {
    $("#box").prepend("<p>먼저 들어가는 문장입니다.</p>");
  });
</script>

📌 실행 결과

처음에는 div 안에 "기존 내용"이 표시됩니다.
앞에 추가 버튼을 클릭합니다.
기존 내용 위쪽에 새로운 문장이 추가됩니다.
버튼을 여러 번 누르면 새 문장이 계속 앞쪽에 추가됩니다.

4. append()와 prepend() 차이

append()와 prepend()의 차이는 추가되는 위치입니다.

append() : 안쪽 맨 뒤에 추가합니다.
prepend() : 안쪽 맨 앞에 추가합니다.

📌 예제 코드

<ul id="list">
  <li>기존 항목</li>
</ul>

<button id="appendBtn">append 추가</button>
<button id="prependBtn">prepend 추가</button>

<script>
  $("#appendBtn").click(function() {
    $("#list").append("<li>뒤에 추가된 항목</li>");
  });

  $("#prependBtn").click(function() {
    $("#list").prepend("<li>앞에 추가된 항목</li>");
  });
</script>

📌 실행 결과

append 추가 버튼을 누르면 기존 항목 아래에 새 항목이 추가됩니다.
prepend 추가 버튼을 누르면 기존 항목 위에 새 항목이 추가됩니다.

5. 리스트에 항목 추가하기

append()는 목록에 새로운 li 태그를 추가할 때 많이 사용합니다.

📌 예제 코드

<ul id="todoList">
  <li>HTML 공부하기</li>
  <li>CSS 공부하기</li>
</ul>

<button id="addBtn">jQuery 추가</button>

<script>
  $("#addBtn").click(function() {
    $("#todoList").append("<li>jQuery 공부하기</li>");
  });
</script>

📌 실행 결과

처음에는 HTML 공부하기, CSS 공부하기 항목이 있습니다.
버튼을 클릭하면 jQuery 공부하기 항목이 아래에 추가됩니다.

6. 최신 항목을 위에 추가하기

새로운 글이나 알림을 가장 위에 보여주고 싶다면 prepend()를 사용하면 됩니다.

📌 예제 코드

<ul id="noticeList">
  <li>기존 공지 1</li>
  <li>기존 공지 2</li>
</ul>

<button id="noticeBtn">새 공지 추가</button>

<script>
  $("#noticeBtn").click(function() {
    $("#noticeList").prepend("<li>새로운 공지입니다.</li>");
  });
</script>

📌 실행 결과

새 공지 추가 버튼을 클릭합니다.
새로운 공지가 목록의 가장 위에 추가됩니다.
최신순 목록을 만들 때 prepend()가 유용합니다.

7. input 값으로 항목 추가하기

input에 입력한 값을 가져와서 목록에 추가할 수도 있습니다.

이때는 val()과 append()를 함께 사용합니다.

📌 예제 코드

<input type="text" id="itemInput" placeholder="할 일을 입력하세요">
<button id="addBtn">추가</button>

<ul id="todoList"></ul>

<script>
  $("#addBtn").click(function() {
    var item = $("#itemInput").val();

    $("#todoList").append("<li>" + item + "</li>");
    $("#itemInput").val("");
  });
</script>

📌 실행 결과

input에 할 일을 입력합니다.
추가 버튼을 클릭합니다.
입력한 내용이 li 태그로 목록에 추가됩니다.
추가 후 input 값은 비워집니다.

8. 빈 값이면 추가하지 않기

input 값이 비어 있는데도 항목이 추가되면 빈 li 태그가 생길 수 있습니다.

그래서 입력값이 비어 있는지 확인한 뒤 추가하는 것이 좋습니다.

📌 예제 코드

<input type="text" id="itemInput" placeholder="할 일을 입력하세요">
<button id="addBtn">추가</button>

<ul id="todoList"></ul>

<script>
  $("#addBtn").click(function() {
    var item = $("#itemInput").val();

    if (item === "") {
      alert("내용을 입력하세요.");
      return;
    }

    $("#todoList").append("<li>" + item + "</li>");
    $("#itemInput").val("");
  });
</script>

📌 실행 결과

input이 비어 있는 상태에서 추가 버튼을 클릭합니다.
"내용을 입력하세요."라는 alert 창이 표시됩니다.
내용을 입력한 뒤 버튼을 클릭하면 목록에 정상적으로 추가됩니다.

9. trim()으로 공백 입력 막기

사용자가 스페이스만 입력하는 경우도 빈 값처럼 처리하는 것이 좋습니다.

이럴 때는 trim()을 사용해서 앞뒤 공백을 제거한 뒤 확인할 수 있습니다.

📌 예제 코드

<input type="text" id="itemInput" placeholder="할 일을 입력하세요">
<button id="addBtn">추가</button>

<ul id="todoList"></ul>

<script>
  $("#addBtn").click(function() {
    var item = $("#itemInput").val().trim();

    if (item === "") {
      alert("내용을 입력하세요.");
      return;
    }

    $("#todoList").append("<li>" + item + "</li>");
    $("#itemInput").val("");
  });
</script>

📌 실행 결과

스페이스만 입력하고 추가 버튼을 클릭해도 항목이 추가되지 않습니다.
실제 문자를 입력했을 때만 목록에 추가됩니다.

10. 입력값을 안전하게 추가하기

사용자가 입력한 값을 HTML 문자열로 바로 붙이면 태그처럼 해석될 수 있습니다.

단순한 글자만 추가하고 싶다면 jQuery 객체를 만든 뒤 text()로 값을 넣는 방식이 더 안전합니다.

📌 예제 코드

<input type="text" id="itemInput" placeholder="내용 입력">
<button id="addBtn">추가</button>

<ul id="list"></ul>

<script>
  $("#addBtn").click(function() {
    var item = $("#itemInput").val().trim();

    if (item === "") {
      alert("내용을 입력하세요.");
      return;
    }

    var li = $("<li></li>").text(item);

    $("#list").append(li);
    $("#itemInput").val("");
  });
</script>

📌 실행 결과

input에 입력한 내용이 목록에 추가됩니다.
입력값은 HTML 태그가 아니라 일반 글자로 처리됩니다.

11. 여러 요소를 한 번에 추가하기

append() 안에는 여러 개의 HTML 태그를 한 번에 넣을 수도 있습니다.

📌 예제 코드

<div id="cardList"></div>

<button id="addCardBtn">카드 추가</button>

<script>
  $("#addCardBtn").click(function() {
    $("#cardList").append(
      "<div style='padding:15px; margin:10px 0; background:#eeeeee; border-radius:8px;'>" +
        "<h3>새 카드</h3>" +
        "<p>append()로 추가된 카드입니다.</p>" +
      "</div>"
    );
  });
</script>

📌 실행 결과

카드 추가 버튼을 클릭합니다.
제목과 문장이 들어간 카드 박스가 새로 추가됩니다.
버튼을 클릭할 때마다 카드가 계속 아래에 추가됩니다.

12. append()와 html()의 차이

append()와 html()은 둘 다 HTML 내용을 다룰 수 있지만 동작 방식이 다릅니다.

html() : 기존 내용을 지우고 새 내용으로 바꿉니다.
append() : 기존 내용을 유지한 채 뒤에 새 내용을 추가합니다.
prepend() : 기존 내용을 유지한 채 앞에 새 내용을 추가합니다.

📌 비교 코드

// 기존 내용을 모두 바꿈
$("#box").html("<p>새 내용</p>");

// 기존 내용 뒤에 추가
$("#box").append("<p>새 내용</p>");

// 기존 내용 앞에 추가
$("#box").prepend("<p>새 내용</p>");

기존 내용을 유지하면서 계속 쌓아야 한다면 append()나 prepend()를 사용하면 됩니다.

13. 전체 예제

이번에는 입력한 내용을 최신순 또는 오래된순으로 추가할 수 있는 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery append prepend</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    #memoList {
      margin-top: 15px;
      padding: 0;
      list-style: none;
    }

    #memoList li {
      padding: 10px;
      margin-bottom: 8px;
      background: #eeeeee;
      border-radius: 6px;
    }
  </style>
</head>
<body>

  <h2>jQuery append(), prepend() 공부</h2>

  <input type="text" id="memoInput" placeholder="메모를 입력하세요">

  <button id="appendBtn">아래에 추가</button>
  <button id="prependBtn">위에 추가</button>

  <ul id="memoList"></ul>

  <script>
    $(function() {
      $("#appendBtn").click(function() {
        var memo = $("#memoInput").val().trim();

        if (memo === "") {
          alert("메모를 입력하세요.");
          return;
        }

        var li = $("<li></li>").text(memo);

        $("#memoList").append(li);
        $("#memoInput").val("");
      });

      $("#prependBtn").click(function() {
        var memo = $("#memoInput").val().trim();

        if (memo === "") {
          alert("메모를 입력하세요.");
          return;
        }

        var li = $("<li></li>").text(memo);

        $("#memoList").prepend(li);
        $("#memoInput").val("");
      });
    });
  </script>

</body>
</html>

📌 실행 결과

input에 메모를 입력합니다.
아래에 추가 버튼을 클릭하면 목록의 아래쪽에 메모가 추가됩니다.
위에 추가 버튼을 클릭하면 목록의 위쪽에 메모가 추가됩니다.
빈 값이나 공백만 입력하면 추가되지 않습니다.

14. 자주 하는 실수

📌 1. append()와 html()을 헷갈리는 경우

html()은 기존 내용을 바꾸고, append()는 기존 내용 뒤에 추가합니다.

// 기존 내용이 사라짐
$("#list").html("<li>새 항목</li>");

// 기존 내용 뒤에 추가됨
$("#list").append("<li>새 항목</li>");

📌 2. li를 ul 밖에 추가하는 경우

li 태그는 ul이나 ol 안에 추가해야 구조가 자연스럽습니다.

// 좋지 않은 예
$("#box").append("<li>항목</li>");

// 좋은 예
$("#list").append("<li>항목</li>");

📌 3. 입력값이 비어 있는데도 추가하는 경우

입력값을 목록에 추가할 때는 빈 값인지 확인하는 과정이 필요합니다.

var item = $("#itemInput").val().trim();

if (item === "") {
  alert("내용을 입력하세요.");
  return;
}

📌 4. 클래스 선택자와 태그 문자열을 헷갈리는 경우

요소를 선택할 때와 새 요소를 만들 때 문법이 다릅니다.

// class가 item인 기존 요소 선택
$(".item")

// 새로운 li 요소 생성
$("<li></li>")

📌 5. jQuery 연결을 빼먹는 경우

append(), prepend()도 jQuery 메서드이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

15. 핵심 정리

append()는 선택한 요소의 안쪽 맨 뒤에 내용을 추가합니다.
prepend()는 선택한 요소의 안쪽 맨 앞에 내용을 추가합니다.
html()은 기존 내용을 바꾸고, append()와 prepend()는 기존 내용을 유지합니다.
리스트 항목을 추가할 때는 ul 또는 ol 안에 li를 추가하는 것이 좋습니다.
input 값으로 항목을 추가할 때는 val(), trim(), append()를 함께 사용할 수 있습니다.
최신 항목을 위에 보여주고 싶다면 prepend()를 사용합니다.
사용자 입력값은 text()로 넣으면 일반 글자로 안전하게 처리할 수 있습니다.

이번 글에서는 jQuery의 append(), prepend() 사용법에 대해 알아봤습니다.

이 두 메서드를 사용하면 기존 내용을 유지하면서 새로운 항목을 앞이나 뒤에 계속 추가할 수 있습니다.

다음 글에서는 [jQuery] 13. before(), after() 사용법에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 14. remove(), empty() 사용법 (0)	2026.06.25
[jQuery] 13. before(), after() 사용법 (0)	2026.06.22
[jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법 (0)	2026.06.20
[jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법 (0)	2026.06.20
[jQuery] 09. show(), hide(), toggle() 사용법 (0)	2026.06.20