.wrapInner()

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

wrapInner 메서드는 해당 요소안의 내용을 지정한 태그로 둘러쌉니다.

+_+
예제 1
기본 예제 - 클릭한 사진 div 태그로 둘러싸기
보기
아래 글자를 클릭해 보세요~!

jQuery 공작소
jQuery 공작소
위의 태그 보기
소스
<style type="text/css">
    .css_test img {
        cursor : pointer;
        margin : 5px;
        width : 250px;
    }
    .css_test div {
        border-radius : 5px;
        border : 3px solid gray;
        margin : 5px;
        padding : 10px;
    }
    .css_test span {
        background : #FFD7EB;
        color : #FF0080;
        font-weight : bold;
        padding : 5px;
    }

    .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){
        $(o).wrapInner('<span />');
        j_test2();
    }

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

$( 셀렉터 ).wrapInner( 태그 )  -  지정한 셀렉터내용태그둘러쌉니다. 겉이 아닌 안에서 둘러쌉니다.
$( 'div' ).wrapInner( '<span />' )  -  div 태그요소내용을 span 으로 둘러쌉니다.

<div>jQuery 공작소</div>  에 위 제이쿼리를 실행하면
<div><span>jQuery 공작소</span></div>  이렇게 됩니다.

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