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

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

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

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

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

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

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

jQuery version: 3.4.1

.prepend(target)

---

설명 : 특정 요소 앞에 컨텐츠를 삽입합니다.

 

.prepend( content [, content ] )

content

Type: htmlString or Element or Text or Array or jQuery

 

.prepend( function ) 

function 

Type: Function( Integer elementOfArray, String html ) => htmlString or Element or Text or jQuery 

A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.

 

.prepend() 메소드는 지정된 내용을 각 요소의 첫 번째 자식으로 삽입합니다 (마지막 자식으로 삽입하려면 .append() 사용).

 

.prepend()와  .prependTo() 메서드는 동일한 작업을 수행합니다. 주요 차이점은 삽입할 컨텐츠와 지정한 요소의 배치입니다. .prepend()를 사용하면 메서드 앞에있는 구문이 지정한 요소이고 뒤가 삽입할 컨텐츠입니다. 반면에 .prependTo()를 사용하면 앞에있는 구문은 삽입할 컨텐츠이고 뒤가 지정한 요소입니다.

 

다음 HTML 예제를 보세요.

 

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

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

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

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

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

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

<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

모든 paragraphs 태그에 HTML 태그를 삽입합니다.

 

모든 paragraphs 태그에 DOM Element를 삽입합니다.

 

 

DOM Element의 위치를 변경할 수 있습니다.

 

 

jQuery와 관련된 포스팅

Manipulation

 

DOM Insertion, Inside

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

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

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

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

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