[jQuery ] – after(), insertAfter(), before(), insertBefore()
페이지 정보
작성자 서방님 댓글 0건 조회 213회 작성일 12-09-21 08:40본문
after() - 지정한 요소 뒤에 새로운 요소를 삽입
insertAfter() - 지정한 요소 뒤에 새로운 요소를 삽입
# after()와 insertAfter()는 동일한 기능을 수행하지만, 삽입될 내용과 타겟의 위치가 다름.
A.after(B) – A 뒤에 B를 추가
A.insertAfter(B) – B 뒤에 A를 추가
before() – 지정한 요소의 시작 부분에 내용을 삽입
insertBefore() – 지정한 요소의 시작 부분에 내용을 삽입
# before()와 insertBefore()는 동일한 기능을 수행하지만, 삽입될 내용와 타겟의 위치가 다름.
A.before(B) – A 앞에 B를 추가
A.insertBefore(B) – B 앞에 A를 추가
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#afterBtn').click(function(){
$('#target').after($('#source'));
});
$('#insertAfterBtn').click(function(){
$('#source').insertAfter($('#target')); //after와 타겟,소스 위치가 다름
});
$('#beforeBtn').click(function(){
$('#target').before($('#source'));
});
$('#insertBeforeBtn').click(function(){
$('#source').insertBefore($('#target')); //before와 타겟,소스 위치가 다름
});
});
</script>
<title> jQuery 예제 </title>
</head>
<body>
<fieldset>
<legend>Source</legend>
<div id="source" style="background-color:red;">적용되어질 요소입니다.</div>
</fieldset>
<fieldset>
<legend>Target</legend>
<div id="target" style="background-color:gray;">타겟 요소입니다.</div>
</fieldset>
<input type="button" id="afterBtn" value="after"></input>
<input type="button" id="insertAfterBtn" value="insertAfter"></input>
<input type="button" id="beforeBtn" value="before"></input>
<input type="button" id="insertBeforeBtn" value="insertBefore"></input>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
