.append (content [, content])

설명 : 매개 변수로 지정된 내용을 일치 요소 세트의 각 요소 끝에 삽입하십시오.

이 .append()메소드는 지정된 내용을 jQuery 콜렉션의 각 요소의 마지막 하위로 삽입합니다 ( 첫 번째 하위 요소로 삽입하려면 use .prepend()).

.append()및 .appendTo()방법은 동일한 작업을 수행합니다. 주요 차이점은 구문과 특히 콘텐츠 및 대상의 배치에 있습니다. With .append()메소드의 앞에있는 selector 표현식은 내용이 삽입되는 컨테이너입니다. 로 .appendTo(), 한편, 콘텐츠가 선택 식 또는 즉시로 작성된 마크 업하거나, 상기 방법을 선행하고,이 타겟 컨테이너에 삽입된다.

다음 HTML을 고려하십시오.

<h2>Greetings</h2>

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

</div>

콘텐츠를 만들어 여러 요소에 동시에 삽입 할 수 있습니다.

$( ".inner" ).append( "<p>Test</p>" );

각 내부 <div>요소는이 새로운 내용을 얻습니다.

<h2>Greetings</h2>

<div class="container">

  <div class="inner">

    Hello

    <p>Test</p>

  </div>

  <div class="inner">

    Goodbye

    <p>Test</p>

  </div>

</div>

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

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

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

<div class="container">

  <div class="inner">Hello</div>

  <div class="inner">Goodbye</div>

  <h2>Greetings</h2>

</div>

중요 : 그러나 하나 이상의 대상 요소가있는 경우 마지막 요소를 제외한 각 대상에 대해 삽입 된 요소의 복제본이 만들어집니다.

추가 인수

같은 다른 콘텐츠 추가 방법과 유사 .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 ] );

이후 .append()에 추가 인수를 여러 개 허용 할 수 <div>있으므로 3 개의 별도 인수로 세 개의 인수 를 전달하여 동일한 결과를 얻을 수 있습니다 $('body').append( $newdiv1, newdiv2, existingdiv1 ). 인수의 유형 및 수는 코드에서 요소를 수집하는 방법에 따라 크게 달라집니다.

추가 참고 사항 :

설계함으로써, HTML 문자열을 받아들이는 임의의 jQuery 생성자 또는 방법 - jQuery를 ()는 , 으로 .Append () , 후론 () 등 - 잠재적 코드를 실행할 수있다. 이는 스크립트 태그를 삽입하거나 코드를 실행하는 HTML 속성을 사용하여 발생할 수 있습니다 (예 :) <img onload="">. URL 쿼리 매개 변수, 쿠키 또는 양식 입력과 같이 신뢰할 수없는 출처에서 가져온 문자열을 삽입 할 때는이 방법을 사용하지 마십시오. 그렇게하면 XSS (Cross-Site-Scripting) 취약점이 발생할 수 있습니다. 문서에 내용을 추가하기 전에 사용자 입력을 제거하거나 이스케이프 처리하십시오.

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