[jQuery All in One] 특정 요소의 뒤쪽에 원하는 컨텐츠를 삽입하는 방법 - .appendTo()

jQuery appendTo 메서드는 지정한 요소의 자식 요소들의 가장 뒤쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 push 메서드를 생각하시면 이해가 편할 것 같습니다.

.append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입

.appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입

.prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입

.prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입

.html() - 특정 요소에 html을 삽입

 

jQuery version: 3.4.1

.appendTo(target)

---

설명 : 일치하는 요소를 대상의 끝에 삽입합니다.

 

.appendTo(target)

target 
Type: Selector or htmlString or Element or Array or jQuery

선택자, HTML 문자열, 요소 배열 또는 jQuery 객체를 지정된 요소의 끝에 삽입합니다.

.append () 및 .appendTo () 메서드는 동일한 작업을 수행합니다. 주요 차이점은 해당 포스팅 참조

 

다음 HTML 예제를 보세요.

 

<h2>안녕하세요</h2>
<div class="container">
  <div class="inner">안녕</div>
  <div class="inner">잘가</div>
</div>

컨텐츠를 한 번에 여러 요소에 삽입 할 수 있습니다.

$("<p>테스트</p>").appendTo(".inner");

<h2>안녕하세요</h2>
<div class="container">
  <div class="inner">
    안녕
    <p>테스트</p>
  </div>
  <div class="inner">
    잘가
    <p>테스트</p>
  </div>
</div>

페이지에서 요소를 선택하여 다른 요소에 삽입 할 수도 있습니다.

$("h2").appendTo($(".container"));

<div class="container">
  <div class="inner">안녕</div>
  <div class="inner">잘가</div>
  <h2>안녕하세요</h2>
</div>

 

추가 사항

URL 쿼리 매개 변수, 쿠키 또는 양식 입력과 같은 신뢰할 수없는 소스에서 얻은 문자열을 삽입하는데 이 방법을 사용하지 마세요. 그렇게 하면 cross-site-scripting(XSS) 취약점이 발생할 수 있습니다.

 

jQuery는 공식적으로 SVG를 지원하지 않습니다. 해당 메소드에 대해 명시 적으로 문서화되지 않은 한 SVG 문서에서 jQuery 메소드를 사용하면 예기치 않은 동작이 발생할 수 있습니다. jQuery 3.0에서 SVG를 지원하는 메소드의 예는 addClass 및 removeClass입니다.

Examples

ID가 "foo"인 요소에 모든 범위를 추가합니다. (자세한 내용은 여기를 참조하세요).

 

 

jQuery와 관련된 포스팅

Manipulation

 

DOM Insertion, Inside

.append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입

.appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입

.prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입

.prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입

.html() - 특정 요소에 html을 삽입