jQuery | javascript | CSS

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

Godffs 2009. 11. 11. 13:12
반응형
검색된 요소를 변경하는 예제입니다.

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]



반응형