Blog Content

    티스토리 뷰

    42.jQuery - ReplaceWith ( 05.Maripulation - 06.ReplaceWith )

    반응형
    검색된 요소를 변경하는 예제입니다.

    06.ReplaceWith.htm

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>검색된 요소를 변경하기</title>

        <style type="text/css">

            button { display:block; margin:3px; color:Red; width:200px; }

            div { color:Red; border:2px solid blue; width:300px; margin:3px; text-align:center; }

        </style>

       

        <script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                //모든 버튼 요소를 클릭시

                $("button").click(function() {

                    // 자신(버튼) <div> 태그로 변경하자.

                    $(this).replaceWith("<div>" + $(this).text() + "</div>");

                });

            });

        </script>

       

    </head>

    <body>

            <button>First</button>

            <button>Second</button>

            <button>Third</button>

    </body>

    </html>


    결과화면

    [그림42-1]



    반응형

    Comments