본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[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)

이미지를 앞/뒤로 추가하는 예제입니다.
샘플이미지1
샘플이미지2
샘플이미지3
샘플이미지4
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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
append() jQeury 1.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
jQeury 2.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
jQeury 3.x 버전 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기