요소, 속성, 객체 조작 메서드2_jQuery

객체 조작(편집) 메서드

- append() -> 선택된 객체 하위 요소 제일 마지막 번쨰에 객체 삽입

- prepend() -> 선택된 객체 하위 요소
제일 첫번째에 객체 삽입

- append, prepend -> html 형태의 문자열을 인수로 삽입하거나, 객체를 삽입할 수
있다.

- remove() -> 선택된 객체 제거

- clone() -> 선택된 객체 복제

append, prepend

<ul id="ul01">
	</ul>
	<button type="button" id="btn01">마지막 요소에 삽입</button>
	<button type="button" id="btn02">첫번째 요소에 삽입</button>
	<button type="button" id="btn03">객체 생성 후 마지막 요소에 삽입</button>

	<script type="text/javascript">
		$(function() {
			var cnt = 0, $ul01 = $('#ul01');
			//선택된 객체 하위 마지막 요소에 객체 삽입
			$('#btn01').click(function() {
				var htmlStr = '<li>ksmart' + cnt + '</li>';
				$ul01.append(htmlStr);
				cnt;
			});
			//선택된 객체 하위 첫번째 요소에 객체 삽입
			$('#btn02').click(function() {
				var htmlStr = '<li>ksmart' + cnt + '</li>';
				$ul01.prepend(htmlStr);
				cnt++;
			});
			//객체 생성 후 선택된 객체 하위 마지막번째 요소에 객체 삽입
			$('#btn03').click(function() {
				var $li = $('<li></li>');
				console.log($li);

				$li.text('ksmart' + cnt);
				$ul01.append($li);
				cnt++;
			});
		});
	</script>

<ul id="ul02">
		<li>
			<button type="button" class="btn01">이동</button>
		</li>
	</ul>
	-----------------------------------
	<ul id="ul03">

	</ul>
	<script type="text/javascript">
		$(function() {
			var $ul02 = $('#ul02'), $ul03 = $('#ul03');
			/*
				새로 객체 생성이 아닌 기존에 존재하는 객체를 검색 후
				다른 위치에 append, prepend 메서드를 통하여 객체 삽입 할 경우
				객체 위치 변경
			 */

			$('.btn01').click(function() {
				var $parentLi = $(this).parent(),
					$parentUl = $parentLi.parent();
				//attr -> 선택된 객체의 속성 조작 메서드
				//인수값 1개 일 시 첫번째 인수에 해당되는 속성 값 가지고 오기
				//인수값 2개 일 시 첫번째 인수에 해당되는 속성에 2번째 인수 삽입
				if($parentUl.attr('id')=='ul02'){
					$ul03.append($parentLi);
				}else{
					$ul02.append($parentLi);
				}
				$ul03.append($(this).parent());
			});
		});
	</script>

clone, remove

- $('선택자').clone() -> 선택된 대상 하위 요소 포함하여 복제
- $('선택자').clone(true) -> 선택된 대상 하위 요소 포함하여 복제 및 등록된 이벤트 포함하여 복제<br>
- $('선택자').remove() -> 선택된 대상 제거

<ul id="ul04">
		<li>
			<button type="button" class="btn02">복제</button>
			<button type="button" class="btn03">이벤트 포함 복제</button>
			<button type="button" class="btn04">제거</button>
		</li>
	</ul> 
	<script type="text/javascript">
		$(function(){
			var $ul04 = $('#ul04');
			//이벤트 제외한 하위 요소 포함하여 복제
			$('.btn02').click(function(){
				var $clone = $(this).parent().clone(true);
				$ul04.append($clone);
			});
			//이벤트 포함한 하위 요소 포함하여 복제
			$('.btn03').click(function(){
				var $clone = $(this).parent().clone(true);
				$ul04.append($clone);
			});
			
			$('.btn04').click(function(){
				$(this).parent().remove();
			})
		});
	</script>