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

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

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

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

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

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

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

 

jQuery version: 3.4.1

.append( content [, content ] )

---

설명 : 매개변수로 지정된 컨텐츠를 일치하는 요소의 끝에 삽입합니다.

 

.append( content [, content ] )

content
Type: htmlString or Element or Text or Array or jQuery

일치하는 요소에 삽입할 DOM 요소, 텍스트 노드, 요소 배열 및 텍스트 노드, HTML 문자열 또는 jQuery 객체

content
Type: htmlString or Element or Text or Array or jQuery

일치하는 요소에 삽입할 하나 이상의 추가 DOM 요소, 텍스트 노드, 요소 및 텍스트 노드, HTML 문자열 또는 jQuery 객체.

.append( function )

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

일치하는 요소에 삽입할 HTML 문자열, DOM 요소, 텍스트 노드 또는 jQuery 객체를 반환하는 함수입니다.
요소의 인덱스 위치와 요소의 이전 HTML 값을 매개변수로 받습니다. 리턴값은 DOM 요소, 텍스트 노드, 요소 배열 및 텍스트 노드, HTML 문자열 또는 jQuery 객체입니다.

.append() 메서드는 지정된 컨텐츠를 각 요소의 마지막 자식으로 삽입합니다. (첫 번째 자식으로 삽입하려면 .prepend() 메서드를 사용해야 합니다)

 

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

.append() vs .appendTo()

$container = $("#containerdiv"); 
$widget = $("<div><h1 id='title'>widget</h1></div>") 

append : $container.append($widget); 
appendTo : $widget.appendTo($container);

다음 HTML 예제를 보세요.

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

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

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

각 내부요소에는 새로운 내용을 얻습니다.

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

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

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

이 방법으로 선택한 요소가 DOM의 다른 위치에있는 단일 위치에 삽입되면 복제되지 않은 대상으로 이동됩니다.

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

중요

그러나 대상 요소가 두 개 이상인 경우 마지막 대상을 제외하고 각 대상에 대해 삽입 된 요소의 복제본이 작성됩니다.

 

Additional Arguments

.prepend()와 .before() 같은 삽입방법과 마찬가지로, .append()는 여러 인수를 입력으로 전달할 수도 있습니다.

입력값으로는 DOM 요소, jQuery 객체, HTML 문자열 및 DOM 요소 배열이 포함됩니다.

예를 들어 다음은 두 개의 새로운 <div>와 기존 <div>를 본문의 마지막 세 하위 노드로 삽입합니다.

var $newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );

 

추가 사항

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

 

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

Examples

모든 단락에 일부 HTML을 추가합니다.

 

 

모든 단락에 요소를 추가합니다.

 

 

모든 단락에 jQuery 객체 (DOM 요소 배열과 유사)를 추가합니다.

 

 

jQuery와 관련된 포스팅

 

Manipulation

 

DOM Insertion, Inside

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

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

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

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

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