.insertBefore()

jQuery Reference

.insertBefore()는 대상 요소의 바로 앞의 형제 요소 위치에 내용을 삽입합니다. 새 HTML을 만들 수도 있고, 문서에 이미 있는 요소를 해당 위치로 이동할 수도 있습니다.

문법과 적용 범위

$(content).insertBefore(target);

새로 만든 안내 문단을 특정 문단 앞에 넣을 때 사용할 수 있습니다. 메서드 앞에는 넣을 내용을, 인수에는 삽입 대상의 선택자나 DOM 요소, jQuery 객체를 지정합니다. DOM(Document Object Model)은 브라우저가 문서를 요소의 트리로 표현한 구조입니다. 대상의 부모 안에 형제를 추가하므로, 대상 안의 첫째·마지막 자식으로 넣는 동작과 다릅니다. 반환된 jQuery 객체에는 삽입한 요소가 들어 있어 이어서 그 요소를 꾸밀 수 있습니다.

jQuery 공식 문서의 .insertBefore() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery insertBefore 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="container"><p id="target">기준 문단</p></div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("<p class='new'>추가 문단</p>").insertBefore("#target");
      $("#output").text($("#container").children().map(function () { return $(this).text(); }).get().join(" / "));
    });
  </script>
</body>
</html>

실행 결과 확인

파일을 열면 추가 내용이 한 번 삽입되고, 아래 결과 문단에 추가 문단 / 기준 문단가 표시됩니다. 개발자 도구의 Elements(요소)에서 추가 문단과 기준 문단이 같은 부모를 갖는지 확인하면 삽입 위치를 분명히 구분할 수 있습니다. 새로고침하면 원래 문서에서 다시 실행됩니다.

기존 요소를 이동하는 문법

$("#existing").insertBefore("#destination");

이 코드는 id가 existing인 기존 요소와 destination인 대상이 있는 문서에서 사용합니다. 삽입 대상이 하나라면 기존 요소의 부모나 위치가 바뀌며, 브라우저의 페이지 원본 보기보다 현재 DOM에서 변화를 확인해야 합니다.

입력값을 텍스트로 넣기

const userText = "<안내 문구>";
$("<p>").text(userText).insertBefore("#target");

앞의 전체 예제에서 삽입 코드 대신 사용하면 꺾쇠괄호까지 문자로 표시됩니다. 삽입된 내용만 지우려면 새 항목을 선택해 .remove()를 사용하되, 기존 항목까지 함께 지우지 않도록 범위를 정합니다.

사용할 때 주의할 점

기존 요소를 하나의 대상으로 넣으면 복사본이 아니라 원본이 이동합니다. 원래 위치도 유지하려면 복제한 요소를 넣어야 합니다.
대상이 여러 개이면 마지막 대상을 제외한 곳에는 복제본이 들어갑니다. id가 있는 요소를 복제하면 중복 id가 생길 수 있으므로 클래스나 별도 id를 사용하세요.
대상 선택 결과가 비어 있으면 문서에서 삽입 결과를 볼 수 없습니다. 선택자의 철자와 실행 시점을 확인하고, 버튼으로 반복 실행하는 코드라면 클릭마다 내용이 추가된다는 점도 고려하세요.
사용자 입력을 HTML 문자열로 이어 붙이면 교차 사이트 스크립팅(XSS) 문제가 생길 수 있습니다. 입력값을 표시할 때는 요소를 만든 뒤 .text()로 넣어 마크업으로 해석되지 않게 합니다.

용도를 비교하려면 .insertAfter()의 반대 방향 삽입, .before()와 인수 배치 비교을 참고하세요.

jQuery Reference