Dev/jQuery

[jQuery] jQuery 요소 복사/추가하기(clone, prepend, append, insert)

쇼크리더 2009. 12. 2. 18:00
반응형
<SPAN id=tx_marker_caret></SPAN><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
	<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(function () {
			$('<a href="#top">맨 앞으로 돌아가기</a>').insertAfter('div.chapter p:gt(1)'); 	//같음 $('div.chapter p:gt(1)').after('<a href="#top">맨 앞으로 돌아가기</a>'); 
			$('<a id="top"></a>').prependTo('body');

			var $pCopy = $('p :eq(0)').clone();
			$pCopy.prepend('#pAdd');
			$('<맨 앞으로 돌아가기>').prependTo('#pAdd'); 								//div 내용 앞에 붙음(추가 내용에 '<>'가 없으면 추가가 안된다 -_-;;)
//			$('<a href="#top">맨 앞으로 돌아가기</a>').prependTo('#pAdd'); 		//div 내용 앞에 붙음
//			$('<a href="#top">맨 앞으로 돌아가기</a>').appendTo('#pAdd'); 		//div 내용 뒤에 붙음
//			$('<a href="#top">맨 앞으로 돌아가기</a>').insertAfter('#pAdd');		//div 태그 뒤에 붙음
//			$('<a href="#top">맨 앞으로 돌아가기</a>').insertBefore('#pAdd'); 		//div 태그 앞에 붙음
		});
	</script>
</head>
<body>
	<h1 id="f-title">이상한 나라의 사각형</h1>
	<div id="f-author">
		<p>애드윈 애벗 지음</p>
	</div>
	<h2>1부 3장</h2>
	<h3 id="f-subtitle">플랫랜드의 주민들</h3>
	<div id="excerpt">
		<p>요약본</p>
	</div>
	<div class="chapter">
		<p class="square">전문직에 종사하거나 사회적으로 인정되는 남자, 남성들은 정사각형으로(나는 여기에 속한다) 때로는 <a href="http://en.wikipedia.org/wiki/pentagon">오각형</a>으로 표현하기도 한다.</p>
		<p class="nobility hexagon">다음이 귀족사회를 나타내는데 여기에도 여러 등급이 있다. <a href="http://en.wikipedia.org/wiki/hexagon">육각형</a>을 시작으로 변의 수가 많을수록 더 높은 지위를 약속받는다. <a href="http://en.wikipedia.org/wiki/polygon">다각형</a>의 경우 각 변의 길이가 점점 짧아져 그 모양이 <a href="http://en.wikipedia.org/wiki/circle">원</a>과 비슷해진다. 이 유형에 속하는 귀족은 자타가 인정하는 가장 높은 계급이다.</p>
		<p><span class="pull-quote">남자 아이는 <span class="drop">아버지보다</span> 변의 수가 <strong>하나 더 많은</strong> 도형으로 인정받는 법률을 만들었다.</span> 그래서 한 세대가 지날수록 지위도 한 단계씩 노아지고 다시 그다음 세대는 더 높은 지위를 얻게 된다.</p>		
	</div>
	<div id="pAdd">
		(원래 내용)
	</div>
</body>
</html>

아직 진도를 얼마 못 나가서 추가 내용에 왜 '<>' 태그가 없으면 추가가 안되는지는 잘 모르겠다.

pend랑 insert의 큰 차이점은 내용에 붙는지 태그에 붙는지의 차이다.

clone()은 이벤트까지 복사를 하지는 못하는데 함께 복사하려면 cloneWithEvents()를 사용하면 된다.

그리고 To와 After, Before의 사용하는게 안하는것보다 복사 붙이기에선 편리한 것 같다는 생각이다.

결과물은 소스 실행해보면.. 된다는.. ㅋ

 
반응형