(3) 객체 편집 메서드
- 선택한 요소를 복제/새 요소를 생성/복제하거나 새로 생성한 요소를 위도한 위치에 삽입/선택한 요소를 삭제하는 기능을 갖고 있는 메서드.
- 객체 편집 메서드의 종류
|
종류 |
사용법 |
설명 |
|
before() |
$("요소 선택").before("새 요소"); |
선택한 요소 이전 위치에 새 요소 추가 |
|
after() |
$("요소 선택").after("새 요소"); |
선택한 요소 다음 위치에 새 요소 추가 |
|
append() |
$("요소 선택").append("새 요소"); |
선택한 요소의 마지막 위치에 새 요소 추가 |
|
appendTo() |
$("새 요소").appendTo("요소 선택"); |
선택한 요소의 마지막 위치에 새 요소 추가 |
|
prepend() |
$("요소 선택").prepend("새 요소"); |
선택한 요소의 맨 앞 위치에 새 요소 추가 |
|
prependTo() |
$("새 요소").prependTo("요소 선택"); |
선택한 요소의 맨 아 위치에 새 요소 추가 |
|
insertBefore() |
$("요소 선택").insertBefore("새 요소"); |
선택한 요소 이전 위치에 새 요소 추가 |
|
insertAfter() |
$("요소 선택").insertAfter("새 요소"); |
선택한 요소 다음 위치에 새 요소 추가 |
|
clone() |
$("요소 선택").clone(true or false); |
선택한 문서 객체를 복제 이때 인자값이 true일 경우 하위 요소까지 모두 복제하고, false일 경우 선택한 요소만 복제 |
| empty() |
$("요소 선택").empty(); |
선택한 요소의 하위 내용들 모두 삭제 |
|
remove() |
$("요소 선택").remove(); |
선택한 요소 삭제 |
|
replaceAll() / replaceWith() |
$("새 요소").replaceAll("요소 선택"); $("요소 선택").replaceWIth("새 요소"); |
선택한 요소들을 새 요소로 교체 |
| unwrap() | $("요소 선택").unwrap(); |
선택한 요소의 부모 요소를 삭제 |
| wrap() |
$("요소 선택").wrap(새 요소) |
선택한 요소를 새 요소로 각각 감쌈. |
|
wrapAll() |
$("요소 선택").wrapAll(); | 선택한 요소를 새 요소로 한꺼번에 감쌈. |
| wrapInner() |
$("요소 선택").wrapInner(새 요소); |
선택한 요소 내에 내용을 새 요소로 각각 감쌈. |
1) before() / after() 메서드
- before() 메서드는 선택한 요소의 이전 위치에 새 요소를 생성.
- after() 메서드는 선택한 요소의 다음 위치에 새 요소를 생성.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!-- 문단 태그 영역 -->
<body>
<ul>
<li id="myList">내용</li>
</ul>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("#myList").before("<li>새 내용 추가1</li>");
// id="myList"인 요소의 이전 위치에 새 요소를 생성
$("#myList").after("<li>새 내용 추가2</li>");
// id="myList:인 요소의 다음 위치에 새 요소를 생성"
});
</script> |
cs |
2) append() / appendTo() / prepend() / prependTo() 메서드
- append() 메서드와 appendTo() 메서드는 선택한 요소 내의 마지막 위치에 새 요소를 생성하여 추가함.
- prepend() 메서드와 prependTo() 메서드는 선택한 요소 내의 앞 위치에 새 요소를 생성하고 추가함.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 |
<!-- 문단 태그 영역 -->
<body>
<ul id="listZone">
<li>내용</li>
</ul>
</body>
<!-- 메서드 적용 1 -->
<script type="text/javascript">
$(function(){
$("#listZone").append("<li>새 내용 추가2</li>");
// id="listZone"인 요소 내의 마지막 위치에 새 요소를 추가
$("<li>새 내용 추가1</li>").prependTo("#listZone");
// id="listZone:인 요소 내의 가장 앞 위치에 새 요소를 추가
});
</script>
<!-- 메서드 적용 2 -->
<script type="text/javascript">
$(function(){
$("<li>새 내용 추가2</li>").appendTo("#listZone");
$("#listZone").prepend("<li>새 내용 추가1</li>");
});
</script> |
cs |
3) insertBefore() / insertAfter() / clone() 메서드
- insertBefore() 메서드는 선택한 요소 이전 위치에 새 요소를 생성하여 추가.
- insertAfter() 메서드는 선택한 요소 다음 위치에 새 요소를 생성하여 추가.
- clone() 메서드는 선택한 요소를 복제.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<ul>
<li id="myList">내용</li>
</ul>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("<li>새 내용 추가1</li>").insertBefore("#myList");
// id="myList"인 요소의 이전 위치에 새 요소를 추가
var copy_obj=$("#myList").clone();
// id="myList"인 요소를 복제하여 변수 copy_obj에 할당
$(copy_obj).insertAfter("#myList");
// id="myList"인 요소의 다음 위치에 앞서 복제한 요소를 추가
});
</script>
|
cs |
4) empty() / remove() 메서드
- empty() 메서드는 선택한 요소의 모든 하위 요소를 삭제.
- remove() 메서드는 선택한 요소를 삭제.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<!-- 문단 태그 영역 -->
<style type="text/css">
#line_1{background-color:yellow;}
#line_2{background-color:orange;}
</style>
<body>
<ul>
<li id="line_1">내용1</li>
<li id="line_2">내용2</li>
</ul>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("#line_1").empty();
// id="line_1"인 요소의 모든 하위 요소를 제거
$("#line_2").remove();
// id="line_2"인 요소를 제거
});
</script>
|
cs |
5) replaceAll() / replaceWith() 메서드
- 선택한 요소를 새 요소로 바꿀 때 사용.
- 주로 선택한 모든 요소를 한꺼번에 바꿀 때 사용.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<!-- 문단 태그 영역 -->
<body>
<h2>교체 메서드</h2>
<p>내용1</p>
<p>내용2</p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("h2").replaceWidth("<h3>replace method</h3>");
// <h2> 태그를 새 요소로 바꿈.
$("<h4>내용3</h4>").replaceAll("p");
// <p> 태그를 새 요소로 바꿈.
});
</script>
|
cs |
6) unwrap() / wrap() / wrapAll() / wrapInner() 메서드
- unwrap() 메서드는 선택한 요소의 부모 요소를 삭제.
- wrap() 메서드는 선택한 요소를 각각 새 요소로 감쌈.
- wrapAll() 메서드는 선택한 요소를 한꺼번에 새 요소로 감쌈.
- wrapInner() 메서드는 선태한 요소의 모든 하위 요소를 새 요소로 감쌈.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 |
<!-- 문단 태그 영역 -->
<style type="text/css">
div{background-color:aqua;}
</style>
<body>
<h1 id="tit_1"><strong>객체 조작 및 생성</strong></h1>
<p class="ct1">내용1</p>
<p class="ct1">내용2</p>
<p class="ct2">내용3</p>
<p class="ct3">내용4</p>
<ul>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("strong").unwrap();
// <strong> 태그의 부모 요소를 제거
$(".ct1").wrap("<div />");
// <div> 태그로 각 class="ct1"인 요소를 각각 감쌈.
$(".ct2").wrapAll("<div />");
// <div> 태그로 모든 class="ct2"인 요소를 한번에 감쌈.
$("li").wrapInner("<h3 />");
// <h3> 요소로 <li> 태그의 하위 요소를 감쌈.
});
</script>
|
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 키보드 접근성을 위한 이벤트 등록법 (0) | 2017.05.23 |
|---|---|
| 이벤트 등록 메서드 - 마우스 이벤트 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 로딩 이벤트 메서드 (0) | 2017.05.23 |
| 이벤트 등록 메서드란? (0) | 2017.05.23 |
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
| 객체 조작 메서드 - 속성 조작 메서드 (0) | 2017.05.22 |
| 선택자와 함께 사용하면 편리한 메서드들 (0) | 2017.05.22 |
| 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2017.05.22 |
