jquery 요소 추가 append, prepend, before, after

 

 

일단 append와 prepend, before와 after로 나눌수 있는데, 가장 크게 나뉘는 부분은

​

요소의 내부(child)요소로써 추가하느냐, 요소의 외부에 붙이느냐의 차이라고 볼 수 있겠다.

​

기본적으로 이 소스를 베이스로 설명 시작~

 

//기본 소스
<ol id="testLIST">
    <li>1 item</li>
    <li>2 item</li>
</ol>

 

 

1. 선택한 요소의 내부에 삽입할때는 append 혹은 prepend를 이용한다.

 

 

//1 .append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다.
//$(target).append(source);
$("#testLIST).append("<li>3 item</li>");
//결과↓
<ol id="testLIST">
    <li>1 item</li>
    <li>2 item</li>
    <li>3 item</li>
</ol>

//1-2. appendTo() 메소드는 선택한 요소를 '해당 요소의 마지막'에 추가한다.
//동작은 .append()와 동일하고, source 객체를 target 객체의 마지막에 추가한다.
//이렇게 하면 첫번째 <p> 뒤에 새로운 html 요소 추가이다.
//$(source).appendTo(target);
//예 : 
$("<span>jquery 테스트입니다.</span>").appendTo("p");


//2. prepend() 메소드는 선택한 요소의 첫번째에 새로운 요소나 컨텐츠를 추가한다.
$("#testLIST).prepend("<li>3 item</li>");
//결과↓
<ol id="testLIST">
    <li>3 item</li>
    <li>1 item</li>
    <li>2 item</li>
</ol>

//2-2. prepentTo() 메소드는 선택한 요소를 '해당 요소의 첫번째'에 추가한다.
//동작은 .append()와 동일하고, source 객체를 target 객체의 첫버째에 추가한다.
//예 :
<p>테스트.</p>
$("<span>jquery 테스트입니다.</span>").prependTo("p");

 

 

 

기존 요소의 외부에 추가할때는 before, after 메소드를 이용한다.

 

 

//.before() 메소드는 선택한 요소의 '바로 앞쪽에' 새로운 요소나 컨텐츠 추가
//$(target).before(source);
$("#testLIST).before("<li>3 item</li>");
//결과 ↓
<li>3 item</li>
<ol id="testLIST">
    <li>1 item</li>
    <li>2 item</li>
</ol>

//.after() 메소드는 선택한 요소의 '바로 뒤쪽에' 새로운 요소나 컨텐츠 추가
//$(target).after(source);
$("#testLIST).after("<li>3 item</li>");
//결과 ↓
<ol id="testLIST">
    <li>1 item</li>
    <li>2 item</li>
</ol>
<li>3 item</li>