jQuery 공작소 : .prepend()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
prepend 메서드는 지정된 요소의 "내용" 앞에 특정내용을 추가합니다.
예제 1
기본 예제
보기
어떤 사람이 줄을 서있는데 ...
소스
<style type="text/css">
.css_test {
border : 5px solid silver;
padding : 5px;
margin-top : 10px;
padding-top : 50px;
}
</style>
어떤 사람이 줄을 서있는데 ...<br><br>
<button type="button" onclick="j_test('//superkts.com/img/css/huk.gif')">사람이 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/dog061.gif')">개가 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/bird20.gif')">새가 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/bird34.gif')">닭이 끼어들었어요</button>
<br>
<div class="css_test"><img src="//superkts.com/img/css/huk.gif" /></div>
<script type="text/javascript">
function j_test(src){
$('.css_test').prepend('<img src="' + src + '" />');
}
</script>
.css_test {
border : 5px solid silver;
padding : 5px;
margin-top : 10px;
padding-top : 50px;
}
</style>
어떤 사람이 줄을 서있는데 ...<br><br>
<button type="button" onclick="j_test('//superkts.com/img/css/huk.gif')">사람이 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/dog061.gif')">개가 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/bird20.gif')">새가 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/bird34.gif')">닭이 끼어들었어요</button>
<br>
<div class="css_test"><img src="//superkts.com/img/css/huk.gif" /></div>
<script type="text/javascript">
function j_test(src){
$('.css_test').prepend('<img src="' + src + '" />');
}
</script>
관련 CSS
jQuery
- 지정한 요소안의 내용 앞에 특정 내용을 추가합니다.
- 이 예제는 DIV 안에 있는 얼굴그림 앞에 다른 내용들을 하나씩 추가해 보는 예제입니다.
- 이미 존재하고 있는 내용앞에 추가되는 것입니다.
- 이미 존재하는 내용의 뒤에 추가하는것은 .append() 입니다.
prepend( 'HTML 태그' )
$( '.css_test' ).prepend( '<img src="이미지주소" />' ) - 클래스명이 css_test 인것의 내용 앞에 이미지를 추가
예제 2
애니메이션 효과로 예제 강화
보기
어떤 사람이 줄을 서있는데 ...
|
소스
<style type="text/css">
.css_test {
border : 5px solid silver;
padding : 5px;
margin-top : 10px;
padding-top : 50px;
width : 100%;
}
.css_test td {
text-align : center;
height : 150px;
}
.css_test .new {
position : relative;
top : -200px;
z-index : 10;
}
</style>
어떤 사람이 줄을 서있는데 ...<br><br>
<button type="button" onclick="j_test('//superkts.com/img/css/huk.gif')">사람이 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/dog061.gif')">개가 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/bird20.gif')">새가 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/bird34.gif')">닭이 끼어들었어요</button>
<br>
<table class="css_test" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom"><img src="//superkts.com/img/css/huk.gif" /></td>
</tr>
</table>
<script type="text/javascript">
function j_test(src){
$('.css_test td').prepend('<img class="new" src="' + src + '" />'); // td의 기존 내용 앞에 이미지 추가
$('.css_test td img:first').animate( { top:0 }, 1000, 'easeOutBounce'); // 새로 추가된 이미지 애니메이션
}
</script>
.css_test {
border : 5px solid silver;
padding : 5px;
margin-top : 10px;
padding-top : 50px;
width : 100%;
}
.css_test td {
text-align : center;
height : 150px;
}
.css_test .new {
position : relative;
top : -200px;
z-index : 10;
}
</style>
어떤 사람이 줄을 서있는데 ...<br><br>
<button type="button" onclick="j_test('//superkts.com/img/css/huk.gif')">사람이 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/dog061.gif')">개가 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/bird20.gif')">새가 끼어들었어요</button>
<button type="button" onclick="j_test('//superkts.com/img/css/bird34.gif')">닭이 끼어들었어요</button>
<br>
<table class="css_test" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom"><img src="//superkts.com/img/css/huk.gif" /></td>
</tr>
</table>
<script type="text/javascript">
function j_test(src){
$('.css_test td').prepend('<img class="new" src="' + src + '" />'); // td의 기존 내용 앞에 이미지 추가
$('.css_test td img:first').animate( { top:0 }, 1000, 'easeOutBounce'); // 새로 추가된 이미지 애니메이션
}
</script>
관련 CSS
jQuery
- 애니메이션 효과로 "기본 예제" 가 좀 더 재미있게 변했습니다.
- 제이쿼리의 "가성비" 는 바로 이런것이죠. 간단한 코딩으로 그럴싸하게 보이기 !!
참고 메서드 : .animate()
참고 자료 : easing(이징) 효과 모음, 제이쿼리 돔 컨트롤 예제모음 1
- 제이쿼리의 "가성비" 는 바로 이런것이죠. 간단한 코딩으로 그럴싸하게 보이기 !!
참고 메서드 : .animate()
참고 자료 : easing(이징) 효과 모음, 제이쿼리 돔 컨트롤 예제모음 1
+ 관련 jQuery +
jQuery 홈페이지 .prepend() API 문서 : http://api.jquery.com/prepend/