jQuery 공작소 : .insertBefore()

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

insertBefore 메서드는 지정한 요소앞에 HTML 태그를 삽입합니다.

예제 1
기본 예제 - 클릭한 요소앞에 태그삽입
보기
아래 글자를 클릭해 보세요~!

jQuery 공작소
jQuery 공작소
위의 태그 보기
소스
<style type="text/css">
    .css_test div {
        border-radius : 5px;
        border : 3px solid gray;
        margin : 5px;
        padding : 10px;
    }

    .css_test div.hello {
        background : #FFD7EB;
        color : #FF0080;
        font-weight : bold;
    }

    .css_test2 textarea {
        border-radius : 5px;
        border : 3px solid gray;
        box-shadow : 0 0 5px silver;
        height : 80px;
        margin-top : 5px;
        width : 100%;
    }
</style>

아래 글자를 클릭해 보세요~!<br><br>

<div class="css_test">
    <div onclick="j_test( this )">jQuery 공작소</div>
    <div onclick="j_test( this )">jQuery 공작소</div>
</div>
<div class="css_test2 mt20">
    <b>위의 태그 보기</b><br>
    <textarea></textarea>
</div>

<script type="text/javascript">
    function j_test(o){
        $('<div class="hello">환영합니다 !!</div>').insertBefore(o);
        j_test2();
    }

    // 태그의 내용을 보여주기
    function j_test2(){
        $( '.css_test2 textarea' ).val( $('.css_test').html() );
    }
    j_test2();
</script>
관련 CSS
jQuery

$( 'HTML 코드' ).insertBefore( 셀렉터 )  -  셀렉터에 해당하는 요소 앞HTML 코드를 삽입합니다.

+ 관련 jQuery +
jQuery 홈페이지 .insertBefore() API 문서 : http://api.jquery.com/insertBefore/