[jQuery] 제이쿼리 요소 추가하기

 

[jQuery] 제이쿼리 요소 추가하기

제이쿼리를 이용하여 요소를 추가하는 방법으로는 크게 4가지 방법이 있다.

1. append() / 2. prepend() / 3.after() / 4. before()

위에 게시된 4가지 방법 모두 요소를 추가하는 함수이다.

이제 요소를 추가하는 법에 대해서 각각 알아보고자 한다.

 

1. append()

 

.append() 함수는 선택된 요소의 마지막에 새로운 요소를 추가할 때 사용한다. [자식으로 생성]

$(this).append('<div>안녕하세요</div>');

var hellow = '<div>안녕하세요</div>'

$(this).append(hellow);

this의 요소 마지막에 <div>안녕하세요</div>를 추가한다.

 

예시

 

아래의 코드와 같이 요소가 있을 때

<ul>
    <li>HOME</li>
    <li>LIVE</li>
    <li>SOURCE</li>
    <li>INFO</li>
</ul>

 

.append() 함수를 사용하면 ul의 마지막에 요소를 추가할 수 있다.

 

$('ul').append('<li>추가 될 요소</li>');

 

결과

 

요소의 제일 마지막에 추가된다.

<ul>
    <li>HOME</li>
    <li>LIVE</li>
    <li>SOURCE</li>
    <li>INFO</li>
    <li>추가 될 요소</li>
</ul>

 

2. prepend()

 

.prepend() 함수는 선택된 요소의 처음에 새로운 요소를 추가할 때 사용한다. [자식으로 생성]

$(this).prepend('<div>안녕하세요</div>');

var hellow = '<div>안녕하세요</div>'

$(this).prepend(hellow);

this의 요소 처음에 안녕하세요 를 추가한다.

 

예시

 

예시는 이전에 사용한 예시를 참고하면 된다.

 

.prepend() 함수를 사용하면 ul의 처음에 요소를 추가할 수 있다.

 

$('ul').prepend('<li>추가 될 요소</li>');

 

결과

 

요소의 제일 처음에 추가된다.

<ul>
    <li>추가 될 요소</li>
    <li>HOME</li>
    <li>LIVE</li>
    <li>SOURCE</li>
    <li>INFO</li>
</ul>

 

3.after()

.after() 함수는 선택된 요소의 뒤쪽에 요소를 추가할 때 사용한다. [형제로 생성]

$(this).after('<div>안녕하세요</div>');

var hellow = '<div>안녕하세요</div>'

$(this).after(hellow);

this의 뒤쪽(코드로 치면 바로 아래에)에 요소를 <div>안녕하세요</div>를 추가한다.

 

 

예시

 

아래의 코드와 같이 요소가 있을 때

<ul>
    <li>HOME</li>
    <li>LIVE</li>
    <li>SOURCE</li>
    <li>INFO</li>
</ul>

 

.after() 함수를 사용하면 ul의 마지막에 요소를 추가할 수 있다.

 

$('ul').after('<p>추가 될 요소</p>');

 

결과

 

ul의 뒤쪽에 요소가 추가된다.

<ul>
    <li>HOME</li>
    <li>LIVE</li>
    <li>SOURCE</li>
    <li>INFO</li>
</ul>
<p>추가 될 요소</p>

 

4. before()

.before() 함수는 선택된 요소의 앞쪽에 요소를 추가할 때 사용한다. [형제로 생성]

$(this).before('<div>안녕하세요</div>');

var hellow = '<div>안녕하세요</div>'

$(this).before(hellow);

this의 앞쪽(코드로 치면 바로 윗줄)에 요소를 <div>안녕하세요</div>를 추가한다.

 

 

예시

 

아래의 코드와 같이 요소가 있을 때

<ul>
    <li>HOME</li>
    <li>LIVE</li>
    <li>SOURCE</li>
    <li>INFO</li>
</ul>

 

.after() 함수를 사용하면 ul의 바로 앞에 요소를 추가할 수 있다.

 

$('ul').before('<p>추가 될 요소</p>');

 

결과

 

ul의 바로 앞쪽에 요소가 추가된다.

<p>추가 될 요소</p>
<ul>
    <li>HOME</li>
    <li>LIVE</li>
    <li>SOURCE</li>
    <li>INFO</li>
</ul>

 

 

5. append() , prepend() , after() , before() 비교

 

append() , prepend()는 선택한 요소의 자식으로 요소를 추가한다.

after() , before()는 선택한 요소의 형제로 요소를 추가한다.

 

append(), after()는 요소의 뒤쪽에 추가한다.

prepend(),before()는 요소의 앞쪽에 추가한다.