문서 객체 삽입

문서 객체 삽입

메서드 이름	설명
$(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;		
	});
});