jQuery 메서드 비교 append, prepend

append()

 

Inserts the specified content, to the end of each element in the set of matched elements.

Inserts the specified content as the last child of each element in the jQuery collection.

Puts data inside an element at the last index
잘라서 붙여 넣기(이동) / 콘텐츠 끼워 넣기

 

syntax:

.append( content [, content ] )

.append( function )

 

$gnb.find("li").each(function() {
	if ( $(this).find("a").prop("href") == window.location.href ){
		$(this).addClass("current");
		$( "#gnb ul" ).append( $(this) );
	}
});

---

잘라 이동하여 last-child로 붙여 넣기

※ not cloned

$gnb.find("li").each(function() {
	if ( $(this).find("a").prop("href") == window.location.href ){
		$(this).addClass("current");
		$( "#gnb ul" ).append( $(this) );
	}
});

 

c 클래스 객체를 a 클래스 객체의 last-child로 붙여 넣기

 $('.a').append($('.c'));

---

콘텐츠 last-child로 끼워 넣기

$( ".inner" ).append( "<p>Test</p>" );

---

prepend()

 

Inserts the specified content, to the beginning of each element in the set of matched elements.

Inserts the specified content as the first child of each element in the jQuery collection.

Puts data inside an element at the first index.

잘라서 붙여 넣기(이동) / 콘텐츠 끼워 넣기

 

syntax:

.prepend( content [, content ] )

.prepend( function )

---

잘라 이동하여 first-child로 붙여 넣기

※ not cloned

$gnb.find("li").each(function() {
	if ( $(this).find("a").prop("href") == window.location.href ){
		$(this).addClass("current");
		$( "#gnb ul" ).prepend( $(this) );
	}
});

 

c 클래스 객체를 a 클래스 객체의 first-child로 붙여 넣기

$('.a').prepend($('.c'));

---

콘텐츠 first-child로 끼워 넣기

$( ".inner" ).prepend( "<p>Test</p>" );

---

2021.08.24 추가(1)

 

after()와 before()

after()

Puts an element after another element

 

(예제) c 클래스 객체를 a 클래스 객체 다음에 붙여 넣기

$('.a').after($('.c'));

 

before()

Puts an element before another element

 

(예제) c 클래스 객체를 a 클래스 객체 앞에 붙여 넣기

$('.a').before($('.c'));

 

---

2021.08.24 추가(2)

 

clone()

 

$(document).ready(function() {
	$("#eventBtn").click(function(){
		$("#BigButton").clone().appendTo("#rightDiv");
	});
});

id 'BigButton' 객체를 복제하여 id 'rightDiv' 객체의 last-child로 붙여 넣기