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

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

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

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

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

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

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

 

jQuery version: 3.4.1

.prependTo(target)

---

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

 

.prependTo(target)

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

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

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

 

다음 HTML 예제를 보세요.

 

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

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

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

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

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

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

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

 

추가 사항

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

 

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

Examples

ID가 "foo"인 요소의 앞에 span 태그에 존재하는 컨텐츠를 삽입합니다.

 

 

jQuery와 관련된 포스팅

 

Manipulation

 

DOM Insertion, Inside

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

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

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

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

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