[jQuery] 추가메서드 .append .prepend() .appendTo() .prepend()

 

jQuery 기존요소의 내부에 추가

.append .prepend() .appendTo() .prepend()

다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다.

메소드설명

.append()	선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
.prepend()	선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.
.appendTo()	선택된 요소를 해당 요소의 마지막에 추가한다.
.prependTo()	선택된 요소를 해당 요소의 첫번째에 추가한다.

 

.append() 메소드

.append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다.

$(target).append(source)

source 객체를 target 객체의 마지막에 추가한다.

아래와 같이 HTML 요소가 있을 때

<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

.append() 메소드를 이용하면, 두번째 <li> 뒤에 새로운 HTML 요소를 추가할 수 있다.

$("#list").append("<li>새로 추가된  아이템</li>");

 

.prepend() 메소드

.prepend() 메소드는 선택한 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.

$(target).prepend(source)

source 객체를 target 객체의 첫번째에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

.prepend() 메소드를 이용하면, 첫번째 <li>에 앞에 새로운 HTML 요소를 추가할 수 있다.

$("#list").prepend("<li>새로 추가된  아이템</li>");

 

.appendTo() 메소드

.appendTo() 메소드는 선택한 요소를 '해당 요소의 마지막'에 추가한다.
동작은 .append() 메소드와 동일하지만, 소스(source)와 타겟(target)의 위치가 서로 반대로 되어 있다.

.append()와 .appendTo() 함수는 동일한 기능을 하지만, 추가될 컨텐츠와 타겟의 위치가 두 함수의 가장 큰 차이점입니다.

//차이점
$( target ).append( 추가할 내용);
$( 추가할 내용 ).appendTo( target );

$(source).appendTo(target)

source 객체를 target 객체의 마지막에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.appendTo() 메소드를 이용하면, 첫번째 <p>에 뒤에 새로운 HTML 요소를 추가할 수 있다.

$("<span>jQuery입니다.</span>").appendTo("p");

 

.prependTo() 메소드

.prependTo() 메소드는 선택한 요소를 '해당 요소의 첫번째'에 추가한다.
동작은 .prepend() 메소드와 동일하지만, 소스(source)와 타겟(target)의 위치가 서로 반대로 되어 있다.

$(source).prependTo(target)

source 객체를 target 객체의 첫번째에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.prependTo() 메소드를 이용하면, <p>요소 앞에 새로운 HTML 요소를 추가할 수 있다.

$("<span>jQuery입니다.</span>").prependTo("p");

 

출처 : https://araikuma.tistory.com/609

[jQuery] 요소의 조작 - 요소의 추가 .append() .prepend() .before() .after()