객체 생성 및 제거

1. 객체 생성

각 html5, javascript, jQuery에서의 객체 생성 구문을 비교해 보자

ex.

p태그 생성

<div id="area1"></div>
    <script>
        $(document).ready(function(){
            // create p tag by html
            var txt1 = "<p>Create text with HTML</p>";
            // create p tag by javascript
            var txt2 = document.createElement("p");
            txt2.innerHTML = "Create text with DOM";
            // create p tag by jQuery
            var txt3 = $("<p></p>").text("Create text with jQuery");

            $("#area1").append(txt1, txt2, txt3);
            // area1 div에 추가
        });
    </script>

각 다른 방법으로 p태그 생성

---

2. 객체 삽입 메소드(1)

: 선택자 요소를 기준으로 매개변수에 작성 된 생성 된 요소 또는 함수의 리턴 값을 추가

 

$(A).append(B) : A 요소 내부 뒷부분에 B를 추가(자식)

$(A).prepend(B) : A 요소 내부 앞부분에 B를 추가(자식)

$(A).after(B) : A 요소 뒷부분에 B를 추가(형제)

$(A).before(B) : A 요소 앞부분에 B를 추가(형제)

 

ex.

추가된 문자는 palegreen색상으로 interval() 함수를 이용해 1초씩 추가되게 해봄

 

 

 

3. 객체 삽입 메소드(2)

생성 된 요소를 매개변수로 지정한 선택자 요소에 추가

(1)의 메소드와 선택자, 생성구문의 순서가 반대

 

$(B).appendTo(A) : B를 A의 요소 내부 뒷부분에 추가(자식)

$(B).prependTo(A) : B를 A의 요소 내부 앞부분에 추가(자식)

$(B).insertAfter(A) : B를 A의 요소 뒷부분에 추가(형제)

$(B).insertBefore(A) : B를 A의 요소 앞부분에 추가(형제)

 

ex. (1)번과 같은 형태로 추가된 요소는 palegreen색상으로 Interval()함수 이용해 1초씩++

---

 

3. 객체 복제 메소드

clone([true|false]) : html 요소를 복사하는 메소드

매개변수로 이벤트 복사 여부를 지정(기본 값 : false)

 

ex.

div박스와 button을 만들어 clone() test

div에 마우스 오버 이벤트를 추가하여 배경색이 바뀌는 이벤트를 걸어두었는데

clone()을 그냥 쓸 시 div박스가 복사는 되지만 

복사된 박스는 이벤트가 걸리지 않았다

이벤트까지 복사하려면 clone(true)라고 명시해주어야 함

 

---

 

4. 객체 제거 메소드

empty() : 모든 자식 요소 제거

remove() : DOM 요소 잘라내기, 연관 된 이벤트도 모두 삭제

detach() : DOM 요소 잘라내기, 연관 된 이벤트 모두 보관

 

ex.

empty button, remove button, detach button을 각각 만들어 이벤트를 걸고 테스트