jQuery 입문 | 요소의 조작 | 요소의 추가 .append() .prepend() .before() .after()

기존 요소의 내부에 추가

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

.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>

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

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

코드 실행

.appendTo() 메소드

.appendTo() 메소드는 선택한 요소를 ‘해당 요소의 마지막‘에 추가한다.
동작은 .append() 메소드와 동일하지만, 소스(source)와 타겟(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");

코드 실행

기존 요소의 외부에 추가

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

.before() 메소드

.before() 메소드는 선택한 요소의 ‘바로 앞쪽에’ 새로운 요소나 콘텐츠를 추가한다.

$(target).before(source)

source 객체를 target 객체의 바로 앞쪽에 추가한다.

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

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

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

var i = 0;
$("button").on("click", function() {
    $("p").before("<div>" + (++i) + "번째 문장입니다.</div>");
});

이때 버튼을 클릭 할때마다 변수 i가 증가하면서 표시를 하게 된다.

코드 실행

.after() 메소드

.after() 메소드는 선택한 요소의 ‘바로 뒤쪽에’ 새로운 요소나 콘텐츠를 추가한다.

$(target).after(source)

source 객체를 target 객체의 바로 뒤쪽에 추가한다.

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

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

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

var i = 0;
$("button").on("click", function() {
    $("p").after("<div>" + (++i) + "번째 문장입니다.</div>");
});

이때 버튼을 클릭 할때마다 변수 i가 증가하면서 표시를 하게 된다.

코드 실행

.insertBefore() 메소드

.insertBefore() 메소드는 선택한 요소를 ‘해당 요소의 앞에’ 추가한다.
동작은 .before() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대로 되어 있다.

$(source).insertBefore(target)

source 객체를 target 객체의 바로 앞쪽에 추가한다.

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

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

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

var i = 0;
$("button").on("click", function() {
    $("<div>" + (++i) + "번째 문장입니다.</div>").insertBefore("p");
});

이때 버튼을 클릭 할때마다 변수 i가 증가하면서 표시를 하게 된다.

코드 실행

.insertAfter() 메소드

.insertAfter() 메소드는 선택한 요소를 ‘해당 요소의 뒤쪽에’ 추가한다.
동작은 .after() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대로 되어 있다.

$(source).insertAfter(target) 

source 객체를 target 객체의 바로 뒤쪽에 추가한다.

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

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

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

var i = 0;
$("button").on("click", function() {
    $("<div>" + (++i) + "번째 문장입니다.</div>").insertAfter("p");
});

이때 버튼을 클릭 할때마다 변수 i가 증가하면서 표시를 하게 된다.

코드 실행

기존 요소를 포함하는 요소의 추가

다음 메소드를 사용하면 기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있다.

.wrap() 메소드

.wrap() 메소드는 ‘선택한 요소‘를 감싸는 새로운 요소를 추가한다.

$(function() {
    $("button").on("click", function() {
        $("p").wrap("<div class='wrap'></div>");
    });
});

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

<p>안녕하세요.</p>
<p>devkuma입니다.</p>

.wrap() 메소드를 이용하면, 각각의 <p>요소를 새로운 HTML 요소로 감쌀 수 있다.

$("p").wrap("<div class='wrap'></div>");

코드 실행

.wrapAll() 메소드

.wrapAll() 메소드는 ‘선택한 모든 요소‘를 모두 한번에 감싸는 새로운 요소를 추가한다.

$(function() {
    $("button").on("click", function() {
        $("p").wrapAll("<div class='wrap'></div>");
    });
});

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

<p>안녕하세요.</p>
<p>devkuma입니다.</p>

.wrapAll() 메소드를 이용하면, <p>요소를 모두 한번에 새로운 HTML 요소로 감쌀 수 있다.

$("p").wrapAll("<div class='wrap'></div>");

코드 실행

.wrapInner() 메소드

.wrapInner() 메소드는 ‘선택한 요소 안`을 감싸는 새로운 요소를 추가한다.

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

<p>안녕하세요. devkuma입니다.</p>

.wrapInner() 메소드를 이용하면, <p>요소의 안을 새로운 HTML 요소로 감쌀 수 있다.

$("p").wrapInner("<div class='wrap'></div>");

코드 실행

기존 요소의 내부 변경

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

.html() 메소드

.html() 메소드는 선택한 요소의 내용을 새로운 HTML 요소로 변경한다.

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

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

.html() 메소드를 이용하면, <p> 요소의 내용을 새로운 HTML 요소로 변경할 수 있다.

$("p").html("<div class='wrap'>devkuma입니다.</div>");

코드 실행

.text() 메소드

.text() 메소드는 선택한 요소의 내용을 새로운 단순 text로 변경한다.

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

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

.text() 메소드를 이용하면, <p> 요소의 내용을 새로운 text로 변경할 수 있다.

$("p").text("devkuma입니다.");

코드 실행

.html() 메소드와 .text() 메소드의 차이점

.html()는 선택한 요소의 내용에 html 태그 요소가 포함되어 있으면 태그를 적용하여 표시를 하지만, .text()인 경우는 html 태그를 적용하지 문장 그대로 표시를 하게 된다.

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

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

아래와 같이 html를 표함한 문장을 표시를 하게 되면 html 태그를 적용하지 문장 그대로 표시한다.

$("p").text("<div class='wrap'>devkuma입니다.</div>");

코드 실행