jQuery 공작소 : .after()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

after 메서드는 지정된 요소의 바깥 다음에 "내용" 을 추가시킵니다

예제 1
기본 예제
보기
어느 네모칸 안에 개가 살고 있었어요. 그런데 ...


소스
<style type="text/css">
    .css_test {
        border : 5px solid silver;
        margin-top : 10px;
        padding : 5px;
        text-align : center;
    }
    .css_test .dogbox {
        border-radius : 5px;
        border : 5px solid gray;
        display : inline-block;
        padding : 5px;
    }
</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">
    <div class="dogbox"><img src="//superkts.com/img/css/dog061.gif" /></div>
</div>

<script type="text/javascript">
    function j_test(src){
        $('.css_test .dogbox').after('<img src="' + src + '" />');
    }
</script>
관련 CSS
jQuery

- 지정한 요소의 바깥쪽 다음에 특정 내용을 추가합니다.
- 이 예제는 개가 있는 DIV 밖의 바로 다음에 다른 내용들을 하나씩 추가해 보는 예제입니다.

after( 'HTML 태그' )

$( '셀렉터' ).after( '<img src="이미지주소" />' )  -  셀렉터로 선택된 요소의 바깥쪽 다음에 이미지추가

예제 2
애니메이션 효과로 예제 강화
보기
어느 네모칸 안에 개가 살고 있었어요. 그런데 ...


그만 왔으면 좋겠다 ...
소스
<style type="text/css">
    .css_test {
        border : 5px solid silver;
        margin-top : 10px;
        padding : 5px;
        text-align : center;
    }
    .css_test .dogbox {
        border-radius : 5px;
        border : 5px solid gray;
        display : inline-block;
        padding : 5px;
    }
    .css_test .new { /* 새로 추가되는 이미지에 사용할 CSS */
        position : relative;
        top : -100px;
        z-index : 10;
    }
    .css_test_stop {
        margin-top : 10px;
        text-align : center;
        font-weight : bold;
        display : none;
        color : red;
        font-size : 15pt !important;
    }
</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">
    <div class="dogbox"><img src="//superkts.com/img/css/dog061.gif" /></div>
</div>
<div class="css_test_stop">그만 왔으면 좋겠다 ...</div>

<script type="text/javascript">
    function j_test(src){
        $('.css_test .dogbox').after('<img class="new" src="' + src + '" />');

        // dogbox 바로 다음의 이미지를 찾아서 애니메이션 (새로 추가된 이미지)
        $('.css_test .dogbox').next().animate({top:0}, 1000, 'easeOutBounce');
        
        if($('.css_test img').size() > 10) $('.css_test_stop').show(); // 이미지가 10개가 넘으면 경고!
    }
</script>
관련 CSS
jQuery
- 애니메이션 효과로 "기본 예제" 가 좀 더 재미있게 변했습니다.
- 제이쿼리의 "가성비" 는 바로 이런것이죠. 간단한 코딩으로 그럴싸하게 보이기 !!

참고 메서드 : .animate()
참고 자료 : easing(이징) 효과 모음 - 이 예제 에서는 이미지가 통통튀는 효과

제이쿼리 돔 컨트롤 예제모음 1
+ 관련 jQuery +
jQuery 홈페이지 .after() API 문서 : http://api.jquery.com/after/