문서 객체 삽입/이동/복제

문서 객체 삽입/이동/복제

문서 객체 삽입

메서드 이름	설명
$(A).appendTo(B)	A를 B의 뒷부분에 추가합니다.
$(A).append(B)	B를 A의 뒷부분에 추가합니다.
$(A).prependTo(B)	A를 B의 앞부분에 추가합니다.
$(A).prepend(B)	B를 A의 앞부분에 추가합니다.
$(A).insertAfter(B)	A를 B의 뒤에 추가합니다.
$(A).after(B)	B를 A의 뒤에 추가합니다.
$(A).insertBefore(B)	A를 B의 앞에 추가합니다.
$(A).before(B)	B를 A의 앞에 추가합니다.

append() 로 예시)

1. $(selector).append(content, content, ......, content)
2. $(selector).append(function(index){});

1번 예시)

$(document).ready(function() {
	// 변수를 선언합니다.
	var h1 = '<h1>Header1</h1>';
	var h2 = '<h2>Header2</h2>';

	// 문서 객체를 추가합니다.
	$('body').append(h1, h2, h1, h2);
});

2번 예시)

$(document).ready(function() {
	// 변수를 선언합니다.
	var content = [
		{ name: '윤인성', region: '서울특별시 강서구' },
		{ name: '윤하린', region: '서울특별시 광진구' },
		{ name: '윤인아', region: '미국 메사추세츠' }	
	];

	// 문서 객체를 추가합니다.
	$('div').append(function(index) {
		// 변수를 선언합니다
		var item = content[index];
		
		var output = '';
		output += '<h1>' + item.name + '</h1>';
		output += '<h2>' + item.region + '</h2>';

		return output;		
	});
});

문서 객체 이동

문서 객체를 선택하고, 문서 객체 삽입 메서드를 사용하면 문서 객체를 쉽게 다른 곳으로 이동시킬 수 있습니다.

2초마다 문서 객체의 순서를 변경하는 예제)

$(document).ready(function() {
	// .image의 크기를 조정합니다.
	$('img').css('width', 250);

	// 함수를 2초마다 실행합니다.
	setInterval(function() {
		// 첫 번째 이미지를 마지막으로 보냅니다.
		$('img').first().appendTo('body');
	}, 2000);
});

문서 객체 복제

clone()

: 문서 객체를 복제합니다.

3가지 형태

1. $(selector).clone()
2. $(selector).clone(Boolean dataAndEvents)
3. $(selector).clone(Boolean dataAndEvents, Boolean deepDataAndEvents)

ex)

$(document).ready(function() {
	$('div').append($('h1').clone());
});