[jQuery] .append()

.append()

.append() 메서드는 선택한 요소 마지막 위치에 요소를 추가합니다.

---

.append()

.append() 메서드는 선택한 요소 마지막 위치에 요소를 추가합니다.

특징	설명
리턴 값	jQuery
버전	1.x
사용성

문법(Syntax)

$("선택자").append("텍스트");
$("선택자").append("선택자");
$("선택자").append("함수");

정의(Definition)

• .append() 메서드는 선택한 마지막 요소에 문자열, 태그, 배열, 선택자, 함수 등을 추가할 수 있습니다.

비교(Compare)

• .append() 메서드는 선택한 요소 마지막 위치에 요소를 추가합니다.
• .prepend() 메서드는 선택한 요소 처음 위치에 요소를 추가합니다.
• .appendTo() 메서드는 마지막 위치에 선택한 요소를 추가합니다.
• .prependTo() 메서드는 처음 위치에 선택한 요소를 추가합니다.
• .html() 메서드는 선택한 요소에 HTML 태그 요소를 추가합니다.
• .text() 메서드는 선택한 요소에 텍스트를 추가합니다.

예제1(Sample)

이미지를 앞/뒤로 추가하는 예제입니다.

클릭 : 이미지가 뒤에 추가됩니다. 클릭 : 이미지가 앞에 추가됩니다. 클릭 : 앞쪽에 있는 이미지를 삭제합니다. 클릭 : 뒷쪽에 있는 이미지를 삭제합니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" alt="샘플이미지1"></div>
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" alt="샘플이미지2"></div>
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" alt="샘플이미지3"></div>
    <div><img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="샘플이미지4"></div>
</div>

.jsample {
    overflow: hidden;
}
.jsample > div {
    float: left;
    width: 18%;
    margin: 1%;
    border: 5px solid transparent;
    box-sizing: border-box;
}
.jsample > div img {
    width: 100%;
    margin: 0;
}

$(".btn1-1").click(function(){
    $(".jsample").append("<div><img src='https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover15.jpg' alt='샘플이미지15'></div>")
});

$(".btn1-2").click(function(){
    $(".jsample").prepend("<div><img src='https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover15.jpg' alt='샘플이미지15'></div>")
});

$(".btn1-3").click(function(){
    $(".jsample div:first").remove();
});

$(".btn1-4").click(function(){
    $(".jsample div:last").remove();
});

호환성(Compatibility)

메서드	버전						6	7	8	9	10	11
append()	jQeury 1.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 2.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 3.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능

참고 사이트(Reference)

• jQuery.com

---