상추의 IT저장소

JS) jQuery - .append() .prepend() .remove() .empty() 사용법 본문

Javascript

JS) jQuery - .append() .prepend() .remove() .empty() 사용법

구너상추 2022. 11. 6. 05:33

1. .append() 함수는 대상의 요소 내에 맨끝에 새로운 요소를 추가하는 함수이다.

2. .prepend() 함수는 현재 대상 요소의 안의 자식중 제일 첫번째 위치에 요소가 추가된다.

3. .remove() 함수는 현재 대상 자체를 삭제한다.

4. .empty() 함수는 현재 엘리먼트 하위 자식들을 다 삭제 한다.

 

    <script>
    //append() 사용법
    function append() { 
        $(document).ready(function(){
            $(".first").append("<div class='use2'>어떻게 지내?</div>");
        });
    }
    function prepend() {
        $(document).ready(function(){
            $(".first").prepend("<div class='use0'> 저는 상추입니다.</div>")
        })
    }
    function remove() {
        $(document).ready(function(){
            $(".use0").remove()
        })
    }
    function empty() {
        $(document).ready(function(){
            $(".first").empty()
        })
    }

    </script>
</head>
<body>
    <div class="first">
        <div class="use1">안녕하세요</div>
    </div>
    <button onclick="append()">append</button>
    <button onclick="prepend()">prepend</button>
    <button onclick="remove()">remove</button>
    <button onclick="empty()">empty</button>
    
</body>

>> 결과 

 

1. append 버튼을 클릭

2. prepend 버튼 클릭

3. remove 버튼 클릭

4. empty 버튼 클릭

 

출처 : https://dion-ko.tistory.com/114

'Javascript' 카테고리의 다른 글

JS) 배열 생성, 추가, 삭제  (0) 2022.11.10
JS) NPM 소개 및 사용법  (0) 2022.11.06
JS) jQuery 요소선택 & 선택자  (0) 2022.11.04
JS) ready() 메소드  (0) 2022.11.04
JS) jQuery 기초  (0) 2022.11.04
'Javascript' Related Articles more