jQuery를 이용해서 노드를 제어하는 방법을 알아보자. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다.
http://api.jquery.com/category/manipulation/
Manipulation | jQuery API Documentation
Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of
api.jquery.com
추가
| 메서드 | 설명 |
| before() | 선택한 요소 앞에 컨텐츠 삽입 |
| after() | 선택한 요소 뒤에 컨텐츠 삽입 |
| prepend() | 선택한 요소 내부의 시작 부분에 컨텐츠 삽입 |
| append() | 선택한 요소 내부의 끝 부분에 컨텐츠 삽입 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<body>
<div class="target" style="background-color: lightblue;">
content1
</div>
<div class="target" style="background-color: lightsalmon;">
content2
</div>
<script src="jquery-3.7.1.js"></script>
<script>
$('.target').before('<div>before</div>');
$('.target').after('<div>after</div>');
$('.target').prepend('<div>prepend</div>');
$('.target').append('<div>append</div>');
</script>
</body>
|
cs |
제거
제거와 관련된 API는 remove()와 empty()가 있다. remove()는 선택된 엘리멘트 전체를 제거하는 것이고, empty()는 선택된 엘리먼트의 하위 요소들만 제거하는 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<body>
<div class="target" id="target1" style="background-color: lightblue; padding: 2em">
target1
</div>
<div class="target" id="target2" style="background-color: lightpink; padding: 2em">
target2
</div>
<input type="button" value="remove target1" id="btn1" />
<input type="button" value="empty target2" id="btn2" />
<script src="jquery-3.7.1.js"></script>
<script>
$('#btn1').click(function(){
$('#target1').remove();
})
$('#btn2').click(function(){
$('#target2').empty();
})
</script>
</body>
|
cs |
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
바꾸기 (교체, 복제, 이동)
1) 교체
replaceAll과 replaceWith는 모두 노드의 내용을 교체하는 API이다. replaceWith는 제어 대상을 먼저 지정하는 것에 반해, replaceAll은 제어 대상을 인자로 전달한다.
replaceAll과 replaceWith는 기능의 차이는 없다. 명칭과 작성 순서만 다르기 때문에 둘 중 하나를 쓰면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<body>
<div class="target" id="target1" style="background-color: lightblue;">
target1
</div>
<div class="target" id="target2" style="background-color: lightpink;">
target2
</div>
<input type="button" value="replaceAll target1" id="btn1" />
<input type="button" value="replaceWith target2" id="btn2" />
<script src="jquery-3.7.1.js"></script>
<script>
$('#btn1').click(function(){
$('<div>replaceAll</div>').replaceAll("#target1");
})
$('#btn2').click(function(){
$('#target2').replaceWith('<div>replaceWith</div>');
})
</script>
</body>
|
cs |
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
2) 복제
노드를 복사할 때 clone() 함수를 사용한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<body>
<div class="target" id="target1" style="background-color: lightblue;">
target1
</div>
<div class="target" id="target2" style="background-color: lightpink;">
target2
</div>
<div id="source">source</div>
<input type="button" value="clone replaceAll target1" id="btn1" />
<input type="button" value="clone replaceWith target2" id="btn2" />
<script src="jquery-3.7.1.js"></script>
<script>
$('#btn1').click(function(){
$('#source').clone().replaceAll("#target1");
})
$('#btn2').click(function(){
$('#target2').replaceWith($('#source').clone());
})
</script>
</body>
|
cs |
id값이 source인 요소를 복제해서 id값이 target1, target2인 요소의 내용을 교체하는 코드이다.
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
3) 이동
dom manipulation API의 인자로 특정 노드를 선택하면 이동의 효과가 난다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<body>
<div class="target" id="target1" style="background-color: lightblue; padding: 2em">
target1
</div>
<div id="source">source</div>
<input type="button" value="append source to target1" id="btn1" />
<script src="jquery-3.7.1.js"></script>
<script>
$('#btn1').click(function(){
$('#target1').append($('#source'));
})
</script>
</body>
|
cs |
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.