개발을 진행하다 보면 정적이 화면이 아닌 동적인 화면을 구성해야 할 경우가 종종 생긴다. 동적인 화면의 경우 특정 엘리먼트가 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>
|
* 결과 코드
|
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>
|
* 결과 코드
|
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>
|
* 결과 코드
|
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' 카테고리의 다른 글
| [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 |
