Blog Content

    티스토리 뷰

    39.jQuery - Append ( 05.Maripulation - 03.Append )

    반응형
    Append : 요소의 안에 내용 추가

    03.Append.htm

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

    <head>

        <title>특정 용어에 대해서 번호 붙이기</title>

       

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

        <script type="text/javascript">

            $(document).ready(function() {

                //[1] term CSS 클래스에 배경색 적용

                $('.term')

                    .not(":odd").css("backgroundColor", "yellow")

                    .end()

                    .filter(":odd").css("background-color", "LightBlue");

     

                //[2] 각각의 주석/용어 뒤에 번호 붙이기

                $('.term').each(function(i) { $(this).append("<sup>" + (i + 1) + "</sup>"); });

                //매개변수 i

            });

        </script>

    </head>

     

    <body>

        <h3>열공!열공!</h3>

        <span class="term">준철이는!!</span>

             요즘들어 게임은 자제 하고

        <span class="term">공부!</span> 하고 있어요.<br />

        <span class="term"> 진짜로!</span>

             열심히 블로그 정리를 하는데...<br />

             다들 구경만 하고 가는거 같아요...

        <span class="term">_</span>

             잘못된게 있으면 알려주세요...

    </body>

    </html>


    결과화면

    [그림39-1]



    반응형

    Comments