jQuery

[jQuery] detach() - 노드를 떼었다. 붙였다. CTRL + X, CTRL + V

힘없는염소 2016. 3. 9. 19:25
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
</head>
<body>
 
<div class="box">
    클릭해봐
</div>
 
<button id="detach">때어내기</button>
<button id="append">붙이기</button>
 
<script>
 
    /*
    .detach() 메서드는 노드를 DOM에서 제거 하면서 캐싱한다. ( 캐싱될때 노드의 정보는 jQuery 데이터 형태로 이전에 등록되었던 이벤트, 정보들도 함께 캐싱된다.)
        DOM에서 제거했다가 추후에 다시 삽입하는 형태로 사용 가능하다.
    캐싱된 노드를 다시 DOM에 삽입 후, 이벤트를 다시 등록해 줄 필요가 없다.
    CTRL + X , CTRL + V 의 개념 ????
    .detach()된 노드는 제거하며 캐싱된 노드를 1번 append할수 있다. ( 여러번 append 할 수 없다. )
    */
 
    //최초 이벤트 등록
    $('.box').click(function(event) {
 
        $(this).data({
            num : 100,
            foo : "홍길동"
        });
        console.log("클릭하셧네요.");
        console.log($(this).data());
 
    });
 
    var detachNode; // 캐싱된 노드를 저장
 
    $("#detach").click(function(event) {
 
        var box = $('.box');
 
        // 떼어내면 DOM에서 제거되기 때문에 .box를 찾을수 없게 된다.
        if(box.length) { // 박스가 존재할때만. 
            detachNode = box.detach();  // 캐싱 - 떼어내기 CTRL + X 
        }
        console.log(detachNode);
 
    });
 
    // append후에 click해보자 최초에 등록한 이벤트가 살아있다.
    $("#append").click(function(event) {
 
        $("body").append($(detachNode));   // 붙이기 CTRL + V  
 
    });
 
</script>
</body>
</html>


반응형
저작자표시 (새창열림)