part2. jquery ch15. 문서객체조작 - kocwcontents.kocw.net/kocw/document/2014/deoksung/... ·...
TRANSCRIPT
![Page 1: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/1.jpg)
과목명: 웹프로그래밍응용교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어
2014년 1학기
Professor Seung-Hoon Choi
Part2. jQuery Ch15. 문서 객체 조작
![Page 2: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/2.jpg)
15 문서 객체 조작
문서 객체 조작– 자바스크립트만으로 문서 객체 모델을 다루려면 복잡함
– jQuery를 이용하면 쉽게 다룰 수 있다.
– 이 책에서 가장 중요한 부분
![Page 3: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/3.jpg)
15.1 문서 객체의 클래스 속성 추가
addClass(클래스_속성_값) / addClass(함수)– 문서 객체에 class 속성을 추가하는 메소드
코드 15-1, 15-2– $('h1').addClass('item');
<h1> 태그에 class = ‘item’ 속성을 추가함
코드 15-3– addClass( )의 인자로 함수를 전달하여 class 속성을 지정함
– $('h1').addClass(function (index) {
return 'class' + index;
});
![Page 4: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/4.jpg)
15.2 문서 객체의 클래스 속성 제거
removeClass(클래스_속성_값)– 해당 class 속성을 제거하는 메소드
코드 15-4, 15-5– $('h1').removeClass('select');
속성 값이 ‘select’인 클래스 속성을 제거함
removeClass( )– 매개변수에 아무것도 입력하지 않으면, 문서 객체의 모든 클래
스 속성을 제거함
![Page 5: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/5.jpg)
15.3 문서 객체의 속성 검사
attr( ) – 문서 객체의 속성과 관련된 모든 기능을 제공하는 메소드
코드 15-6, 15-7– var src = $('img').attr('src');
<img> 태그 중 ‘src’ 속성의 값을 src 변수에 담는다.
첫 번째 발견한 <img> 태그를 선택한다.– (주의) jQuery에서 값을 얻어오는 메소드의 경우는 일반적으로 첫 번
째 선택된 문서 객체에 대해서만 동작한다.
![Page 6: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/6.jpg)
15.4 문서 객체의 속성 추가
문서 객체에 속성을 추가할 때에도 attr( ) 메소드를 사용함
세 가지 형태– (1) $(selector).attr(name, value);
– (2) $(selector).attr(name, function(index, attr){ }); 속성의 값이 함수에 의한 결정됨
– (3) $(selector).attr(object); 인자 object: 속성 이름과 값 쌍들로 이루어진 객체
![Page 7: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/7.jpg)
15.4 문서 객체의 속성 추가
(1)번 형태– 코드 15-9
$(‘img’).attr(‘width’, 200);– 모든 <img> 태그에 width=“200” 속성을 추가함
![Page 8: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/8.jpg)
15.4 문서 객체의 속성 추가
(2)번 형태– 코드 15-10
$('img').attr('width', function (index) {
return (index + 1) * 100;
});
=> 첫 번째 <img> 태그의 width 속성 값은 100
=> 두 번째 <img> 태그의 width 속성 값은 200
=> 세 번째 <img> 태그의 width 속성 값은 300
… …
![Page 9: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/9.jpg)
15.4 문서 객체의 속성 추가
(3)번 형태– 코드 15-11
$('img').attr({
width: function (index) { return (index + 1) * 100; },
height: 100});
=> width 속성과 height 속성을 <img> 태그에 추가함
![Page 10: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/10.jpg)
15.5 문서 객체의 속성 제거
removeAttr(name)– 문서 객체의 속성을 제거하는 메소드
코드 15-12, 15-13– $('h1').removeAttr('data-index');
모든 <h1> 태그의 ‘data-index’ 속성을 제거함
![Page 11: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/11.jpg)
15.6 문서 객체의 스타일 검사
css( )– 스타일과 관련된 모든 기능을 수행하는 메소드
코드 15-14, 15-15– var color = $('h1').css('color');
첫 번째 <h1> 태그의 color 스타일 속성의 값을 얻어옴
– background-color 스타일 속성의 경우 아래 둘 다 가능함 (1) css(‘background-color’)
(2) css(‘backgroundColor’)
![Page 12: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/12.jpg)
15.7 문서 객체의 스타일 추가
문서 객체에 스타일을 추가하는 3가지 형태– (1) $(selector).css(name, value);
– (2) $(selector).css(name, function(index, currentValue) { }); 함수를 이용해서 스타일 속성의 값을 결정함
– index: 선택된 태그의 인덱스
– currentValue: 현재 선택된 태그의 name 스타일 속성의 값
– (3) $(selector).css(object) object: 스타일 속성과 값의 쌍들로 이루어진 객체
![Page 13: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/13.jpg)
15.7 문서 객체의 스타일 추가
(1)번 형태– 코드 15-17
$('h1').css('color', 'red');
![Page 14: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/14.jpg)
15.7 문서 객체의 스타일 추가
(2)번 형태– 코드 15-18
var color = ['red', 'white', 'purple'];
// 문서 객체의 스타일을 변경합니다.
$('h1').css('color', function (index) {
return color[index];
});
=> 함수가 ‘color’ 스타일 속성의 값을 결정함
![Page 15: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/15.jpg)
15.7 문서 객체의 스타일 추가
(3)번 형태– 코드 15-9
var color = ['red', 'white', 'purple'];
// 문서 객체의 스타일을 변경합니다.
$('h1').css( {
color: function (index) {
return color[index]; },
backgroundColor: ‘black’
} );
=> ‘color’와 ‘background-color’ 스타일 속성의 값을 설정함
![Page 16: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/16.jpg)
15.8 문서 객체의 내부 검사
문서 객체의 내부를 검사하는 메소드– html()
문서 객체의 내부 글자와 관련된 모든 기능을 수행함
HTML 태그를 인식해서 가져옴
문서 객체의 innerHTML와 관련 있음
– text() 문서 객체의 내부 글과와 관련된 모든 기능을 수행함
HTML 태그를 무시하고 스트링(텍스트)만 가져옴
HTML 태그문서 객체의 textContent와 관련 있음
![Page 17: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/17.jpg)
15.8 문서 객체의 내부 검사
코드 15-21– var html = $('h1').html();
첫 번째 <h1> 태그의 내부 내용물을 가져옴
HTML 태그가 포함되어 있다면 이를 인식하여 HTML 태그도 가져옴
코드 15-22– var text = $('h1').text();
모든 <h1> 태그의 내부 텍스트를 가져옴
HTML 태그가 있다면 무시하고 텍스트만 가져옴
![Page 18: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/18.jpg)
15.9 문서 객체의 내부 추가
문서 객체의 내부 내용물 추가 방법– (1) $(selector).html(value) / $(selector).text(value);
– (2) $(selector).html(function(index, currentHtml) { });
$(selector).text(function(index, currentText) { });
![Page 19: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/19.jpg)
15.9 문서 객체의 내부 추가
코드 15-23, 15-24– $('div').html('<h1>$().html() Method</h1>');
모든 <div> 태그에 내부 내용물을 설정함
<h1> 태그를 인식하여, <h1> 태그를 생성하여 DOM 트리의<div> 아래에 붙인 후 그 아래에 ‘$().html() Method’를 가지는 텍스트 노드를 붙인다.
코드 15-25– $(‘div’).text(‘<h1>$().html() Method</h1>’);
<h1>을 태그로 인식하지 않고, 텍스트로 인식하여 전체가 텍스트 노드로서 <div> 태그의 내부 내용물이 된다.
![Page 20: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/20.jpg)
15.9 문서 객체의 내부 추가
코드 15-26– $('div').html(function (index) {
return '<h1>Header-' + index + '</h1>'; });
=> 함수를 이용해서 내부 내용물을 결정함
코드 15-27, 15-28– $('h1').html(function (index, html) {
return '★' + html + '★';
});
=> 모든 <h1> 태그의 현재 내용물 양쪽에 별표를 붙여서
다시 <h1> 태그의 내용물로 설정함
![Page 21: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/21.jpg)
15.10 문서 객체 제거
문서 객체 제거 메소드– remove()
선택된 문서 객체를 제거함
– empty() 선택된 문서 객체의 내부에 들어있는 모든 문서 객체를 제거함
코드 15-29, 15-30– $('h1').first().remove();
첫 번째 <h1> 태그를 제거함
코드 15-31– $('div').empty();
<div> 태그 내부의 모든 문서 객체가 제거됨
![Page 22: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/22.jpg)
15.11 문서 객체 생성(1)
문서 객체의 2 종류– (1) 텍스트 노드를 갖는 문서 객체
– (2) 텍스트 노드를 갖지 않는 문서 객체
문서 객체 생성– $( ) 메소드를 이용함
![Page 23: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/23.jpg)
15.11 문서 객체 생성(1)
코드 15-32, 15-33– $('<h1></h1>');
<h1> 문서 객체 생성
코드 15-34– $('<h1></h1>').html('Hello World .. !');
<h1> 태그 내부에 텍스트 노드 생성
코드 15-35– $('<h1></h1>').html('Hello World .. !').appendTo('body');
<h1> 태그 내부에 텍스트 노드를 생성하여, <body> 태그에 붙임
![Page 24: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/24.jpg)
15.11 문서 객체 생성(1)
코드 15-36– $('<h1>Hello World .. !</h1>').appendTo('body');
$( ) 안에, 텍스트 내용을 직접 넣을 수도 있다.
![Page 25: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/25.jpg)
15.12 문서 객체 생성(2)
텍스트 노드를 갖지 않는 문서 객체 생성– $( )와 attr( ) 메소드 이용
코드 15-37– $(‘img’): img 태그 선택– $('<img />').attr('src', 'Chrysanthemum.jpg').appendTo('body');
<img> 태그를 생성하고, src 속성을 지정한 후
<body> 태그에 붙임
코드 15-38– $('<img />', { src: 'Chrysanthemum.jpg', width: 350,
height:250 }).appendTo('body'); }); $( ) 메소드의 두 번째 인자로 속성을 지정하는 객체를 넣어줌
![Page 26: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/26.jpg)
15.13 문서 객체 삽입(1)
선택된 문서 객체 A를 인자로 들어온 문서 객체 B에 삽입하는 메소드– $(A).appendTo(B)
A를 B의 내부의 뒤 부분에 추가함(A가 B의 자식이 됨)
– $(A).prependTo(B) A를 B의 내부의 앞 부분에 추가함 (A가 B의 자식이 됨)
– $(A).insertAfter(B) A를 B 뒤에 추가함 (A가 B의 형제가 됨)
– $(A).insertBefore(B) A를 B의 앞에 추가함 (A가 B의 형제가 됨)
![Page 27: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/27.jpg)
15.14 문서 객체 삽입(2)
선택된 문서 객체 A에 인자로 들어온 문서 객체 B를 삽입하는 메소드– $(A).append(B)
B를 A의 내부의 뒤 부분에 추가함 (B가 A의 자식이 됨)
– $(A).prepend(B) B를 A의 내부의 앞 부분에 추가함 (B가 A의 자식이 됨)
– $(A).after(B) B를 A의 뒤에 추가함 (B가 A의 형제가 됨)
– $(A).before(B) B를 A의 앞에 추가함 (B가 A의 형제가 됨)
![Page 28: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/28.jpg)
15.14 문서 객체 삽입(2)
append( ) 메소드 사용 방법– (1) $(selector).append(content, content, …, content);
content: 문자열, 또는 문서 객체가 들어갈 수 있음
선택된 문서 객체 내부의 뒤 부분에, content 들을 추가함
예– $(‘div’).append(‘h1’); // 모든<div> 뒤 부분에 ‘h1’ 텍스트 노드 추가
– $(‘div’).append(‘<h1>’); // 모든 <div> 뒤 부분에 <h1> 태그 추가
– $(‘div’).append(‘<h1>csh</h1>’); // 모든 <div> 뒤 부분에 태그 + 텍스트 노드 추가
– (2) $(selector).append(function(index) { … }); 함수를 이용하여 추가할 문서 객체를 생성함
![Page 29: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/29.jpg)
15.14 문서 객체 삽입(2)
코드 15-39, 15-40– $('body').append(h1, h2, h1, h2);
<body> 태그 내부의 뒷 부분에 변수 h1과 h2에 담긴 내용을 추가함
코드 15-41, 15-42, 15-43– 코드 연구
![Page 30: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/30.jpg)
15.15 문서 객체 이동
문서 객체 이동 방법– 기존의 문서 객체를 선택한 후,
– 문서 객체 삽입 메소드를 사용함
코드 15-44, 15-45– $(‘<img />’).appendTo(‘body’); // 생성해서 붙임
– $('img').first().appendTo('body'); 첫 번째 <img> 태그를 선택하여,
<body> 태그 내의 뒤 부분으로 옮긴다.
코드 15-46– 이미지 크기 조정 후
– 1초에 한 번씩 첫 번째 이미지를 뒤로 옮김(setInterval( ) 이용)
![Page 31: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/31.jpg)
15.16 문서 객체 복제
코드 15-47– $('div').append($('h1'));
모든 기존의 <h1> 태그를 선택하여
<div> 태그 내부 뒤 부분으로 이동시켜라
문서 객체 복제 메소드– clone( )
문서 객체를 복제함
![Page 32: Part2. jQuery Ch15. 문서객체조작 - KOCWcontents.kocw.net/KOCW/document/2014/deoksung/... · 2016-09-09 · 15.2 문서객체의클래스속성제거 removeClass(클래스_속성_값)](https://reader033.vdocuments.net/reader033/viewer/2022050520/5fa3a8dcffe53a0d2a4dae61/html5/thumbnails/32.jpg)
15.16 문서 객체 복제
clone( ) 메소드 형태– (1) $(selector).clone( )
– (2) $(selector).clone(Boolean dataAndEvents) 이벤트 핸들러도 복제될 지 말지 지정함
코드 15-48– $('div').append($('h1').clone());
모든 <h1> 태그들을 복제하여, <div> 태그 뒤 부분에 추가함