객체 조작 메서드 - 편집 메서드

  객체 편집 메서드

선택한 객체의 옵션(메서드에 위치 옵션 포함) 위치에 html 요소를 삽입하거나 삭제 또는 복제하는 메소드

 

종류	사용법	설명
before()	$('선택자').before('html요소');	선택한 대상의 이전 위치에 html 삽입
after()	$('선택자').after('html요소');	선택한 대상의 다음 위치에 html 삽입
append()	$('선택자').append('html 요소');	선택한 대상의 자식요소에 제일 끝에 html 삽입
prepend()	$('선택자').prepend('html 요소');	선택한 대상의 자식요소에 제일 처음에 html 삽입
clone()	)$('선택자').clone(true or false);	선택한 대상을 복제한다.
remove()	$('선택자').remove();	선택한 요소를 삭제한다.
wrap()	$('선택자').wrap('html 요소')	선택한 요소를 새 요소로 각각 감싼다.

---

  객체 편집 메서드 사용법

1) before, after

<h1>before after</h1>
<div id = "center">
	중앙
</div>
<button type="button" id="beforeAfterBtn">다음과 이전 html 삽입</button>
<script>
$('#beforeAfterBtn').click(function(){
	$('#center').before('<div>이전</div>');
    $('#center').after('<div>다음</div>');
})
</script>

 

중앙

 

 

 

2) append , prepend

<h1>append prepend</h1>
<table>
	<tbody id="addTr">
		<tr><td>중앙</td></tr>
	</tbody>
</table>
<button type="button" id="appendBtn">append</button>
<button type="button" id="prependBtn">prepend</button>
<script>
	$('#appendBtn').click(function(){
		var len = $('#addTr').find('tr').length;
		$('#addTr').append('<tr><td>마지막'+len+'</td></tr>');
	});
	$('#prependBtn').click(function(){
		var len = $('#addTr').find('tr').length;
		$('#addTr').prepend('<tr><td>처음'+len+'</td></tr>');
	});
</script>

중앙

 

 

3) clone

<div id="cloneTarget">
	<h2>안녕하세요</h2>
</div>
<div id="cloneCopy">
</div>
<button type="button" id="cloneBtn">복제</button>
<script>
	$('#cloneBtn').click(function(){
		var clone = $('#cloneTarget').clone();
		$('#cloneCopy').html(clone.html());
	});
</script>

안녕하세요

 

 

 

 

---

  편집 메서드 실습

실습1. #add1 선택시 addList 객체를 조회하여 1차 지역과 일치하는 2차 지역목록을 #add2에 출력하여라.

 

:: 지역 선택 :: 전주 군산 익산 :: 지역을 선택해 주세요 ::

<script>
	var addList = {
		'전주':['덕진구','완산구'],
		'군산':['개사길','거사길'],
		'익산':['고봉로','고현로']
	}
</script>
<select id ="add1">
	<option value="">:: 지역 선택 ::</option>
	<option value="전주">전주</option>
	<option value="군산">군산</option>
	<option value="익산">익산</option>
</select>
<select id="add2">
	<option value="">:: 지역을 선택해 주세요 ::</option>
</select>
<script>
$('#add1').change(function(){
	var add = $(this).val();
	var addArray = addList[add];
	var html='<option value="">:: 지역을 선택해 주세요 ::</option>';
	for(var i=0;i<addArray.length;i++){		
		html += '<option value="'+addArray[i]+'">'+addArray[i]+'</option>';
	}	
	$('#add2').html(html);
})