jQuery. 요소의 추가 / 1. 기존 요소의 내부에 추가

새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공

1. 기존 요소의 내부에 추가

DOM Insertion, Inside | jQuery API Documentation

메소드	설명
.append()	선택한 요소 집합의 각 요소 마지막에 매개변수로 선택된 콘텐츠를 추가.
.prepend()	선택한 요소 집합의 각 요소 시작 부분에 매개변수(로 선택된 콘텐츠를 추가.
.appendTo()	선택한 요소 집합의 모든 요소를 ​​해당 요소(target) 마지막에 추가.
.prependTo()	선택한 요소 집합의 모든 요소를 ​​해당 요소(target) 시작부분에 추가.
.html()	선택한 요소 집합에서 첫 번째 요소의 HTML 콘텐츠를 가져오거나 선택한 모든 요소의 HTML 콘텐츠를 설정.
.text()	(하위 항목을 포함하여)선택한 요소 집합에서 각 요소의 결합된 텍스트 내용을 가져오거나 선택한 요소의 텍스트 내용을 설정.

.append() / .prepend()

.append() : 선택한 요소 집합의 각 요소 마지막에 매개변수로 지정된 콘텐츠를 추가.

.prepend() : 선택한 요소 집합의 각 요소 시작 부분에 매개변수로 지정된 콘텐츠를 추가.

구조

.append( content [, content ] ) // version added: 1.0
.prepend( content [, content ] )

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

선택한 요소 집합의 각 요소 마지막에 추가할 하나 이상의 content.

.append( function ) // version added: 1.4
.prepend( function )

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

선택한 요소 집합의 각 요소 마지막에 추가할 함수. ( htmlString or Element or Text or jQuery 개체를 return 하는) 

집합에서 요소의 인덱스 위치와 요소의 이전 HTML 값을 인수로 받는다.

함수 내에서 this는 집합의 현재 요소를 나타낸다.

예시) 기본

See the Pen by jongha (@gajong) on CodePen.

<h2>Greetings</h2>
<div class="container">
  <h1>good</h1> <!--.prepend()-->
  <div class="inner">
    <p>(prepend)</p> <!--.prepend()-->
    Hello
    <p>(append)</p> <!--.append()-->
  </div>
  <div class="inner">
    <p>(prepend)</p> <!--.prepend()-->
    Goodbye
    <p>(append)</p> <!--.append()-->
  </div>
  <h2>Greetings</h2> <!--.append()-->
</div>

@ 두 개 이상의 대상 요소가 있는 경우 마지막 요소를 제외하고 각 대상에 대해 삽입된 요소의 복제된 복사본이 생성.

예시) 추가적인 인수

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

두 개의 새 <div>와 기존 <div>를 body의 마지막 세 자식 노드로 삽입.

.append()와 .prepend()는 추가 인수를 얼마든지 허용할 ​​수 있으므로

$('body').append( $newdiv1, newdiv2, existingdiv1 )
$( "body" ).prepend( $newdiv1, newdiv2, existingdiv1 )

위처럼 세 개의 <div>를 세 개의 개별 인수로 전달해 동일한 결과를 얻을 수 있다.

.appendTo() / .prependTo()

.appendTo() : 선택한 요소 집합의 모든 요소를 ​​해당 요소(target) 마지막에 추가.

.prependTo() : 선택한 요소 집합의 모든 요소를 ​​해당 요소(target) 시작 부분에 추가.

구조

.appendTo( target )

Type: Selector or htmlString or Element or Array or jQuery

 

.append() 및 .appendTo() 메서드는 동일한 작업을 수행.

주요 차이점은 구문, 구체적으로 콘텐츠 및 대상의 배치에 있습니다.

예시) 기본

$( "<p>(appendTo)</p>" ).appendTo( ".inner" );
$( "h2" ).appendTo( $( ".container" ) );
$( "<p>(prependTo)</p>" ).prependTo( ".inner" );
$( "h1" ).prependTo( $( ".container" ) );

<h2>Greetings</h2>
<div class="container">
  <h1>good</h1> <!--.prependTo()-->
  <div class="inner">
    <p>(prepend)</p> <!--.prependTo()-->
    Hello
    <p>(append)</p> <!--.appendTo()-->
  </div>
  <div class="inner">
    <p>(prepend)</p> <!--.prependTo()-->
    Goodbye
    <p>(append)</p> <!--.appendTo()-->
  </div>
  <h2>Greetings</h2> <!--.appendTo()-->
</div>

.html()

선택한 요소 집합에서 첫 번째 요소의 HTML 콘텐츠를 가져오거나
선택한 모든 요소의 HTML 콘텐츠를 설정.

구조

.html() //version added: 1.0
.html( htmlString ) //version added: 1.0
.html( function ) //version added: 1.4

1. html()

.html()을 사용하여 모든 요소의 내용을 가져올 수 있습니다.

@ 이 메서드는 인수를 허용하지 않는다.

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

$( "div.demo-container" ).html();

<!--result-->
<div class="demo-box">Demonstration Box</div>

첫 번째 일치 항목만 HTML 콘텐츠가 반환

예시) 단락을 클릭하여 html에서 텍스트로 변환.

See the Pen by jongha (@gajong) on CodePen.

2 .html( htmlString ) / html(function)

htmlString : 일치하는 각 요소의 콘텐츠로 설정할 HTML 문자열

function : 설정할 HTML 콘텐츠를 반환하는 함수.

Type: Function( Integer index, htmlString oldhtml ) => htmlString

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

<div class="demo-container">의 내용은 다음과 같이 설정한다.

$( "div.demo-container" )
  .html( "<p>All new content. <em>You bet!</em></p>" );

<div class="demo-container"> 안의 모든 것을 대체한 결과.

<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>

demo-container 첫 번째 html 콘텐츠인 demo-box가 제거되고 새로운 내용으로 대체된다.

요소의 내용을 설정하면 해당 요소에 있던 모든 내용이 새 내용으로 대체된다.

jQuery는 해당 요소를 새 콘텐츠로 교체하기 전에 자식 요소에서 데이터 및 이벤트 핸들러와 같은 다른 구성을 제거한다.

예시) 함수

jQuery 1.4부터 html() 메서드를 사용하면 함수를 전달하여 HTML 콘텐츠를 설정한다.

$( "div.demo-container" ).html(function() {
  var emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});

이 예제는 6개의 단락이 있는 문서가 주어지면

<div class="demo-container">의 HTML을 아래처럼 설정한다.

<p>All new content for <em>6 단락!</em></p>

예시) 응용

See the Pen by jongha (@gajong) on CodePen.

.text()

(하위 항목을 포함하여) 선택한 요소 집합에서 각 요소의 결합된 텍스트 내용을 가져오거나
선택한 요소의 텍스트 내용을 설정.

구조

.text() //version added: 1.0
.text( text )//version added: 1.0
.text( function ) //verstion added: 1.4

1. text()

.text() : 하위 항목을 포함하여 일치하는 요소 집합에서 각 요소의 결합된 텍스트 내용을 가져옵니다.

.text() 메서드의 결과는 일치하는 모든 요소의 결합된 텍스트를 포함하는 문자열입니다.

@ 이 메서드는 인수를 허용하지 않습니다.

@ .html() 메서드와 달리 .text()는 XML 문서와 HTML 문서 모두에서 사용할 수 있습니다.

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>
<script>
	$( "div.demo-container" ).text()
</sctipt>
<!--result-->
Demonstration Box list item 1 list item 2

하위 <ul>, <li> 태그를 빼고 문자만 가져왔다.

1. text( text ) / text( function )

.text( text ) : 일치하는 각 요소의 내용으로 설정할 텍스트, Number 또는 Boolean이 제공되면 문자열 표현으로 변환

Type: String or Number or Boolean

 

.text ( function ) : 설정할 텍스트 내용을 반환하는 함수.

집합에서 요소의 인덱스 위치와 이전 텍스트 값을 인수로 받습니다.

Type: Function( Integer index, String text ) => String

예시) text(text)

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

코드를 준다.

$( "div.demo-container" ).text( "<p>This is a test.</p>" );

<div class="demo-container">
  <p>This is a test.</p>;
</div>

다음과 같이 태그가 노출된 것처럼 렌더링 된 페이지에 나타납니다

<p>This is a test</p>

예시) text( function )

jQuery 1.4부터

.text() 메서드를 사용하면 함수를 전달하여 텍스트 내용을 설정

$( "ul li" ).text(function( index ) {
  return "item number " + ( index + 1 );
});

세 개의 <li> 요소가 있는 정렬되지 않은 목록이 주어지면

이 예제는 다음 DOM 출력을 생성합니다.

<ul>
  <li>item number 1</li>
  <li>item number 2</li>
  <li>item number 3</li>
</ul>