[jQuery] 요소의 추가 .append/.prepend/.before/.after/.wrap/.wrapAll

 

 

 

 

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

- 다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 컨텐츠를 추가 가능.

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

 

 

1) .append() 메소드

 

$(target).append(source)

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

 

ex)

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

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

 

 

2) .prepend() 메소드

 

$(target).prepend(source)

 

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

 

ex)

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

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

 

3) .appendTo() 메소드

선택한 target 요소를 '해당 요소의 마지막에' 추가.

$(source).appendTo(target)

 

ex)

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

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

 

 

4) .prependTo() 메소드

선택한 target 요소를 '해당 요소의 첫번째에' 추가.

$(source).prependTo(target)

 

ex)

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

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

 

 

 

 

2. 기존 요소의 외부에 추가

메소드	설명
.before()	선택한 요소의 바로 앞쪽에 새로운 요소/콘텐츠 추가
.after()	선택한 요소의 바로 뒤쪽에 새로운 요소/콘텐츠 추가
.insertBefore()	선택한 요소를 해당 요소의 앞쪽에 추가
.insertAfter()	선택한 요소를 해당 요소의 뒤쪽에 추가

 

1) .before() 메소드

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

 

$(target).before(source)

 

ex)

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

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

 

 

 

2) .after() 메소드

$(target).after(source)

ex)

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

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

 

 

* insertBefore() / insertAfter()은 .before()/.after()과 동작은 같지만

소스(source)와 타겟(target) 위치가 서로 반대로 되어있다.

 

3) .insertBefore() 메소드

$(source).insertBefore(target)

ex)

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

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

 

 

4) .insertAfter() 메소드

 

$(source).insertAfter(target)

ex)

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

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

 

3. 기존의 요소를 포함한 요소의 추가

 

메소드	설명
.wrap()	'선택한 요소'를 포함하는 새로운 요소를 추가
.wrapAll()	선택한 '모든 요소'를 포함하는 새로운 요소를 추가
.wrapInner()	선택한 요소'에' 포함되는 새로운 요소를 추가

 

1) .wrap()

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

p { margin: 10px; padding:5px 10px; border: 1px solid blue; }
.wrap { margin: 10px; border: 1px solid green; }

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

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

2) .wrapAll()

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

p { margin: 10px; padding: 5px 10px; border: 1px solid blue; }
.wrap { margin: 10px; border: 1px solid green; }

 

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

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

 

3) .wrapInner()

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

 

ex)

p { margin: 10px; padding: 5px 10px; border: 1px solid blue; }
.wrap { margin: 10px; border: 1px solid green; }

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

 

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

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