210411 JavaScript jQuery appendTo, prependTo 연습

ITisIT210·2021년 4월 12일

jQuery

목록 보기

45/142

<!DOCTYPE html>
<html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style>
                ul,li {
                    list-style: none;
                    padding: 10px 15px;
                    border : 1px solid #333;
                }
            </style>
    </head>
    <boby>
        <button class="btn1">Add1</button>
        <button class="btn2">Add2</button>
        <ul>
            <li>list1</li>
            <li>list2</li>
            <li>list3</li>
            <li>list4</li>
            <li>list5</li>
        </ul>
        <script src="js/jquery-3.6.0.min.js"></script> 
        <script src="js/jquery-ui.min.js"></script> 
        
        <script>
            /*
                $(선택자).appendTo(요소);
                해당 선택자를 특정 요소의 마지막 자식으로 추가

                $(선택자).prependTo(요소);
                해당 선택자를 특정 요소의 첫 번째 자식으로 추가
            */
            $(".btn1").on("click", function() {
                $("ul li:first-child").appendTo("ul");
            });

            $(".btn2").on("click", function() {
                $("ul li:first-child").remove(); // remove()는 삭제하는 함수
            });
        </script>
    </boby>
    </html>