.add()

jQuery Reference

.add()는 현재 선택 집합과 추가 대상을 합친 새 jQuery 객체를 반환합니다. 문서에 요소를 삽입하는 메서드가 아니며, 원래 변수의 선택 집합도 자동으로 바뀌지 않습니다.

문법과 적용 범위

const $combined = $("li").add("p.note");
$combined.addClass("marked");

추가 대상으로 선택자, DOM 요소, jQuery 객체 또는 HTML 문자열을 전달할 수 있습니다. 같은 요소가 겹치면 중복을 제거하며, 같은 문서에 연결된 요소들은 문서 순서로 정렬됩니다. 인수로 준 순서가 그대로 유지된다고 가정하지 마세요. 새 HTML을 전달하면 요소를 만들 수는 있지만, .appendTo() 같은 삽입 메서드를 호출하기 전에는 페이지에 표시되지 않습니다.

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

전체 실행 예제

아래 코드를 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 add 예제</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>
<ul><li>첫 항목</li><li>둘째 항목</li></ul>
<p class="note">목록 설명</p>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $items = $("li");
      const $combined = $items.add("p.note");
      $combined.addClass("marked");
      $("#output").text("원래: " + $items.length + " / 합친 결과: " + $combined.length);
    });
  </script>
</body>
</html>

실행 결과 확인

두 항목과 설명 문단이 강조되고 결과는 원래: 2 / 합친 결과: 3입니다. $items에는 여전히 li 두 개만 들어 있습니다.

사용할 때 주의할 점

변수를 확장하려면 $items = $items.add(...)처럼 다시 대입해야 하므로 변수를 let으로 선언하세요. 반환값을 버리면 이후 작업에서 추가 대상이 빠집니다.
서로 다른 문서의 요소나 문서에 연결되지 않은 요소를 합칠 때는 정렬 순서를 기대하지 마세요. 정확한 순서가 필요하면 DOM 요소 배열로 jQuery 객체를 만듭니다.
탐색 직전의 선택 집합을 합치는 .addBack()과 다릅니다. 임의의 다른 대상을 합칠 때는 .add(), 탐색 스택을 활용할 때는 .addBack()을 사용하세요.

용도를 비교하려면 .addBack()과 선택 집합의 차이, .appendTo()로 새 요소 삽입하기을 참고하세요.

jQuery Reference