[Jquery] 제이쿼리 .append() .prepend() . .remove() .empty() 사용법 & 예제

개발을 진행하다 보면 정적이 화면이 아닌 동적인 화면을 구성해야 할 경우가 종종 생긴다. 동적인 화면의 경우 특정 엘리먼트가 show/hide 될수도 있으면 현재 엘리먼트의 자식에 새로운 엘리먼트를 추가해야 하는경우도 있습니다. 그리하여 오늘은 동적인 화면을 컨트롤할때 자주 사용하느 append(), prepend(), remove(), empty()에 대해서 알아보겠습니다.

1. .append() 사용법 & 예제

제이쿼리 .append() 함수의 경우 현재 대상의 엘리먼트 내에 맨끝에 새로운 엘리먼트를 추가하는 함수입니다.

아래 소스의 경우 div1이라는 id를 가진 엘리먼트 안의 자식 맨 끝에 div를 새로 추가하는 방법입니다.

* 실행코드

1
2
3
4
5
6
7
8
9
10
11

<script>
    $(document).ready(function(){
        $("#div1").append("<div id='div2'>안녕하세요.</div>");
    });
</script>
 
<body>
    <div id="div1">
        <div id="use1"></div>
    </div>
</body>
Colored by Color Scripter

* 결과 코드

1
2
3
4
5
6

<body>
    <div id="div1">
        <div id="use1"></div>
        <div id='div2'>안녕하세요.</div>
    </div>
</body>

2. .prepend() 사용법 & 예제

제이쿼리 .prepend() 함수의 경우 현재 대상 엘리먼트의 안의 자식중 제일 첫번째 위치에 엘리먼트가 추가 된다.

div1이라는 id를 가진 엘리먼트 안에서 first라는 id를 가진 div 뒤가 아닌 앞에 엘리먼트가 추가 된다.

* 실행코드

1
2
3
4
5
6
7
8
9
10
11

<script>
    $(document).ready(function(){
        $("#div1").prepend("<div id='imfirst'>내가 새로운 첫번째</div>");
    });
</script>
 
<body>
    <div id="div1">
        <div id="first">내가 첫번째</div>
    </div>
</body>
Colored by Color Scripter

* 결과 코드

1
2
3
4
5
6

<body>
    <div id="div1">
        <div id="imfirst">내가 새로운 첫번째</div>
        <div id="first">내가 첫번째</div>
    </div>
</body>

3. .remove() 사용법 & 예제

제이쿼리 .remove() 함수의 경우 현재 대상 자체를 삭제하는 기능입니다.

* 실행코드

1
2
3
4
5
6
7
8
9
10

<script>
    $(document).ready(function(){
        $("#ready").remove();
    });
</script>
<body>
    <div>
        <div id="ready">remove 될 element</div>
    </div>
</body>
Colored by Color Scripter

* 결과 코드

1
2
3
4

<body>
    <div>
    </div>
</body>

4. .empty() 사용법 & 예제

제이쿼리 .empty() 함수의 경우 현재 엘리먼트 하위 자식들을 다 삭제 합니다.

* 실행코드

1
2
3
4
5
6
7
8
9
10
11
12

<script>
    $(document).ready(function(){
        $("#div1").empty();
    });
</script>
<body>
    <div id="div1">
        <div id="no1"></div>
        <div id='no2'>안녕하세요.</div>
    </div>
</body>


 
* 결과 코드



1
2
3
4
5

<body>
    <div id="div1">
    </div>
</body>
 



 
추천글[JavaScript] 자바스크립트 배열 사용법 & 예제 배열 선언 방법
[Java] 자바 Map to JSONObject, JSONObject to Map 사용법 & 예제
[Javascript] 제이쿼리 엘리먼트(Element) 존재 확인 사용법 & 예제

저작자표시 비영리

'JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 Array() 배열 사용법 & 예제 배열 선언 방법 (0)	2021.01.06
[Javascript] 제이쿼리 엘리먼트(Element) 존재 확인 사용법 & 예제 (0)	2020.09.23
[Javascript] 자바스크립트 체크박스 체크 유/무 확인방법 & 예제 (0)	2020.05.11
[JavaScript] 자바스크립트 window.open() 새창 열기 기능 사용방법 & 예제 (0)	2020.05.08
[ Jquery ] 제이쿼리 실시간 검색어 자동완성 ajax 통신 방법 & 예제 (2)	2020.04.03