[jQuery] 13. before(), after() 사용법

지난 글에서는 jQuery의 append(), prepend()를 사용해서 선택한 요소 안쪽에 새로운 내용을 추가하는 방법을 알아봤습니다.

이번 글에서는 선택한 요소의 바깥쪽 앞뒤에 내용을 추가할 때 사용하는 before()와 after()에 대해 알아보겠습니다.

append(), prepend()가 선택한 요소의 안쪽에 내용을 추가한다면, before(), after()는 선택한 요소의 바깥쪽 앞이나 뒤에 내용을 추가합니다.

1. before(), after()란?

jQuery에서 before()와 after()는 선택한 요소를 기준으로 앞이나 뒤에 새로운 요소를 추가할 때 사용합니다.

before() : 선택한 요소의 바로 앞에 내용을 추가합니다.
after() : 선택한 요소의 바로 뒤에 내용을 추가합니다.

중요한 점은 선택한 요소 안에 들어가는 것이 아니라, 선택한 요소와 같은 위치에 형제 요소로 추가된다는 것입니다.

$("#target").before("앞에 추가");
$("#target").after("뒤에 추가");

2. before() 기본 사용법

before()는 선택한 요소의 바로 앞에 내용을 추가합니다.

📌 기본 문법

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

📌 예제 코드

<p id="target">기준 문장입니다.</p>

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

<script>
  $("#beforeBtn").click(function() {
    $("#target").before("<p>앞에 추가된 문장입니다.</p>");
  });
</script>

📌 실행 결과

처음에는 "기준 문장입니다."만 표시됩니다.
앞에 추가 버튼을 클릭합니다.
기준 문장 바로 위에 새로운 문장이 추가됩니다.
버튼을 여러 번 누르면 기준 문장 앞에 계속 추가됩니다.

3. after() 기본 사용법

after()는 선택한 요소의 바로 뒤에 내용을 추가합니다.

📌 기본 문법

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

📌 예제 코드

<p id="target">기준 문장입니다.</p>

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

<script>
  $("#afterBtn").click(function() {
    $("#target").after("<p>뒤에 추가된 문장입니다.</p>");
  });
</script>

📌 실행 결과

처음에는 "기준 문장입니다."만 표시됩니다.
뒤에 추가 버튼을 클릭합니다.
기준 문장 바로 아래에 새로운 문장이 추가됩니다.
버튼을 여러 번 누르면 기준 문장 뒤에 계속 추가됩니다.

4. before()와 after() 차이

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

before() : 선택한 요소 앞에 추가합니다.
after() : 선택한 요소 뒤에 추가합니다.

📌 예제 코드

<div id="box" style="padding:15px; background:#eeeeee;">
  기준 박스
</div>

<button id="beforeBtn">before 추가</button>
<button id="afterBtn">after 추가</button>

<script>
  $("#beforeBtn").click(function() {
    $("#box").before("<p>박스 앞에 추가됩니다.</p>");
  });

  $("#afterBtn").click(function() {
    $("#box").after("<p>박스 뒤에 추가됩니다.</p>");
  });
</script>

📌 실행 결과

before 추가 버튼을 누르면 기준 박스 위에 문장이 추가됩니다.
after 추가 버튼을 누르면 기준 박스 아래에 문장이 추가됩니다.

5. append(), prepend(), before(), after() 비교

네 가지 메서드는 모두 내용을 추가할 수 있지만 위치가 다릅니다.

메서드	추가 위치	기준
append()	선택한 요소 안쪽 맨 뒤	요소 내부
prepend()	선택한 요소 안쪽 맨 앞	요소 내부
before()	선택한 요소 바로 앞	요소 외부
after()	선택한 요소 바로 뒤	요소 외부

📌 비교 코드

$("#box").append("<p>안쪽 뒤</p>");
$("#box").prepend("<p>안쪽 앞</p>");
$("#box").before("<p>바깥 앞</p>");
$("#box").after("<p>바깥 뒤</p>");

6. 리스트 항목 앞에 추가하기

before()를 사용하면 특정 li 앞에 새로운 항목을 추가할 수 있습니다.

📌 예제 코드

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

<button id="beforeBtn">기준 앞에 추가</button>

<script>
  $("#beforeBtn").click(function() {
    $("#target").before("<li>앞에 추가된 항목</li>");
  });
</script>

📌 실행 결과

처음에는 기준 항목만 있습니다.
버튼을 클릭하면 기준 항목 위에 새 li가 추가됩니다.
새로운 li는 ul 안에서 기준 항목의 형제 요소가 됩니다.

7. 리스트 항목 뒤에 추가하기

after()를 사용하면 특정 li 뒤에 새로운 항목을 추가할 수 있습니다.

📌 예제 코드

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

<button id="afterBtn">기준 뒤에 추가</button>

<script>
  $("#afterBtn").click(function() {
    $("#target").after("<li>뒤에 추가된 항목</li>");
  });
</script>

📌 실행 결과

처음에는 기준 항목만 있습니다.
버튼을 클릭하면 기준 항목 아래에 새 li가 추가됩니다.
기준 항목을 중심으로 앞뒤에 항목을 배치할 수 있습니다.

8. input 값으로 앞뒤에 추가하기

input에 입력한 값을 가져와서 특정 요소의 앞이나 뒤에 추가할 수 있습니다.

이때는 val(), trim(), before(), after()를 함께 사용합니다.

📌 예제 코드

<input type="text" id="textInput" placeholder="추가할 내용을 입력하세요">

<button id="beforeBtn">앞에 추가</button>
<button id="afterBtn">뒤에 추가</button>

<p id="target">기준 문장입니다.</p>

<script>
  $("#beforeBtn").click(function() {
    var text = $("#textInput").val().trim();

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

    $("#target").before("<p>" + text + "</p>");
    $("#textInput").val("");
  });

  $("#afterBtn").click(function() {
    var text = $("#textInput").val().trim();

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

    $("#target").after("<p>" + text + "</p>");
    $("#textInput").val("");
  });
</script>

📌 실행 결과

input에 문장을 입력합니다.
앞에 추가 버튼을 클릭하면 기준 문장 위에 추가됩니다.
뒤에 추가 버튼을 클릭하면 기준 문장 아래에 추가됩니다.
입력 후 input 값은 비워집니다.

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

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

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

📌 예제 코드

<input type="text" id="textInput" placeholder="내용 입력">
<button id="addBtn">기준 뒤에 추가</button>

<p id="target">기준 문장입니다.</p>

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

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

    var newText = $("<p></p>").text(text);

    $("#target").after(newText);
    $("#textInput").val("");
  });
</script>

📌 실행 결과

입력한 내용이 기준 문장 뒤에 추가됩니다.
입력값은 HTML 태그가 아니라 일반 글자로 처리됩니다.
사용자 입력값을 화면에 출력할 때 더 안전한 방식입니다.

10. 여러 요소 앞뒤에 한 번에 추가하기

같은 class를 가진 요소가 여러 개 있을 때 before()나 after()를 사용하면 각 요소 앞뒤에 내용이 추가됩니다.

📌 예제 코드

<p class="item">첫 번째 문장</p>
<p class="item">두 번째 문장</p>
<p class="item">세 번째 문장</p>

<button id="addBtn">구분선 추가</button>

<script>
  $("#addBtn").click(function() {
    $(".item").before("<hr>");
  });
</script>

📌 실행 결과

구분선 추가 버튼을 클릭합니다.
class가 item인 모든 문장 앞에 hr 태그가 추가됩니다.
여러 요소를 선택하면 각각의 요소에 적용됩니다.

11. 클릭한 요소 뒤에만 추가하기

여러 요소 중 클릭한 요소의 뒤에만 내용을 추가하고 싶다면 $(this)를 사용합니다.

📌 예제 코드

<button class="itemBtn">항목 1</button>
<button class="itemBtn">항목 2</button>
<button class="itemBtn">항목 3</button>

<script>
  $(".itemBtn").click(function() {
    $(this).after("<span> 선택됨</span>");
  });
</script>

📌 실행 결과

항목 1 버튼을 클릭하면 항목 1 뒤에만 "선택됨" 문구가 추가됩니다.
항목 2 버튼을 클릭하면 항목 2 뒤에만 문구가 추가됩니다.
현재 클릭한 요소만 기준으로 삼을 때 $(this)를 사용합니다.

12. insertBefore(), insertAfter()도 알아두기

jQuery에는 before(), after()와 비슷한 insertBefore(), insertAfter()도 있습니다.

before(), after()는 기준 요소를 먼저 선택하고, insertBefore(), insertAfter()는 추가할 요소를 먼저 만듭니다.

📌 비교 코드

// 기준 요소를 먼저 선택
$("#target").before("<p>앞에 추가</p>");

// 추가할 요소를 먼저 작성
$("<p>앞에 추가</p>").insertBefore("#target");

// 기준 요소를 먼저 선택
$("#target").after("<p>뒤에 추가</p>");

// 추가할 요소를 먼저 작성
$("<p>뒤에 추가</p>").insertAfter("#target");

초보 단계에서는 before(), after()를 먼저 익히면 충분합니다.

13. 전체 예제

이번에는 입력한 메모를 기준 카드의 위나 아래에 추가하는 예제를 만들어보겠습니다.

📌 예제 코드

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

  <style>
    .memo {
      padding: 10px;
      margin: 8px 0;
      background: #eeeeee;
      border-radius: 6px;
    }

    #targetCard {
      padding: 15px;
      margin: 12px 0;
      background: royalblue;
      color: white;
      border-radius: 8px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h2>jQuery before(), after() 공부</h2>

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

  <button id="beforeBtn">위에 추가</button>
  <button id="afterBtn">아래에 추가</button>

  <div id="targetCard">
    기준 카드입니다.
  </div>

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

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

        var memoBox = $("<div></div>").addClass("memo").text(memo);

        $("#targetCard").before(memoBox);
        $("#memoInput").val("");
      });

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

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

        var memoBox = $("<div></div>").addClass("memo").text(memo);

        $("#targetCard").after(memoBox);
        $("#memoInput").val("");
      });
    });
  </script>

</body>
</html>

📌 실행 결과

input에 메모를 입력합니다.
위에 추가 버튼을 누르면 기준 카드 위에 메모가 추가됩니다.
아래에 추가 버튼을 누르면 기준 카드 아래에 메모가 추가됩니다.
빈 값이나 공백만 입력하면 추가되지 않습니다.
입력값은 text()를 통해 일반 글자로 안전하게 추가됩니다.

14. 자주 하는 실수

📌 1. append()와 before()를 헷갈리는 경우

append()는 선택한 요소 안쪽 뒤에 추가하고, before()는 선택한 요소 바깥 앞에 추가합니다.

// box 안쪽 뒤에 추가
$("#box").append("<p>추가</p>");

// box 바깥 앞에 추가
$("#box").before("<p>추가</p>");

📌 2. li를 잘못된 위치에 추가하는 경우

li는 ul 또는 ol 안에 있어야 자연스럽습니다. 특정 li 앞뒤에 추가하면 같은 ul 안의 형제 li로 들어갑니다.

<ul>
  <li id="target">기준 항목</li>
</ul>

$("#target").before("<li>앞 항목</li>");
$("#target").after("<li>뒤 항목</li>");

📌 3. 여러 요소에 전부 추가되는 경우

class 선택자로 여러 요소를 선택하면 모든 요소 앞뒤에 내용이 추가될 수 있습니다.

// class가 item인 모든 요소 뒤에 추가됨
$(".item").after("<span>추가</span>");

클릭한 요소에만 추가하고 싶다면 $(this)를 사용합니다.

$(".item").click(function() {
  $(this).after("<span>추가</span>");
});

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

input 값으로 요소를 추가할 때는 빈 값과 공백을 확인하는 것이 좋습니다.

var text = $("#textInput").val().trim();

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

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

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

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

15. 핵심 정리

before()는 선택한 요소의 바로 앞에 내용을 추가합니다.
after()는 선택한 요소의 바로 뒤에 내용을 추가합니다.
append(), prepend()는 선택한 요소 안쪽에 추가합니다.
before(), after()는 선택한 요소 바깥쪽에 형제 요소로 추가합니다.
리스트에서 특정 li 앞뒤에 새 li를 추가할 수 있습니다.
여러 요소를 선택하면 각각의 요소 앞뒤에 내용이 추가됩니다.
클릭한 요소에만 추가하려면 $(this)를 사용하면 됩니다.
사용자 입력값은 새 요소를 만든 뒤 text()로 넣으면 더 안전합니다.

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

append(), prepend(), before(), after()의 차이를 이해하면 원하는 위치에 HTML 요소를 정확하게 추가할 수 있습니다.

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

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

[jQuery] 15. parent(), children(), find() 사용법 (0)	2026.06.26
[jQuery] 14. remove(), empty() 사용법 (0)	2026.06.25
[jQuery] 12. append(), prepend() 사용법 (1)	2026.06.21
[jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법 (0)	2026.06.20
[jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법 (0)	2026.06.20