09.22 항해 10일차 TIL

React 1주차 강의를 미리 들어 보면서 숙제를 해봤는데 jquery 라이브러리를 사용하여 편하게 작성 하다가 바닐라JS를 사용하여 작성을 하려니 간단한 과제임에도 불구하고 한참을 헤메다가 완성 하였다.

오늘은 바닐라JS를 사용하며 배운점을 정리 해보려고 한다.

HTML 태그 요소 동적 추가 및 삭제

DOM 객체 생성

let element = document.createElement('tagName');

HTML 태그의 DOM 객체를 생성할 수 있다.

innerHTML

element.innerHTML = "새로 생성된 요소 입니다.";

DOM Tree에 추가

부모.appendChild(DOM객체); // DOM 객체를 부모의 마지막 자식으로 삽입

DOM 객체 삭제

부모.removeChild(삭제 하려는 자식객체);

작성 코드

위 네가지 방법을 사용하여 간단한 카드를 만드는 코드를 작성 해보았다.

 <script>
        // '완료' 버튼 클릭 시 등록 되어있는 카드 삭제
        function remove(obj) {

        document.getElementById('card_box').removeChild(obj.parentNode);

        }

        function add_Card() {

            // div, h3, button 요소 만들기
            let card_div = document.createElement('div'); 
            let card_title = document.createElement('h3');
            let card_btn = document.createElement('button');

            // input text 값 저장
            let todo_text = document.getElementById('input_todo').value;
            // div 요소에 id값 할당
            card_div.setAttribute("id","card");

            // card_div의 자식요소로 title, btn 부여
            card_div.appendChild(card_title)
            card_div.appendChild(card_btn)

            // title에 input text값 부여 
            card_title.innerHTML = todo_text;
            
            // button에 class할당, 클릭 시 remove 함수 호출
            card_btn.setAttribute("onClick","remove(this)");
            card_btn.setAttribute("class","succes_btn");
            
            card_btn.innerHTML = '완료';

            // card_box 의 자식요소로 card_div 부여
            document.getElementById('card_box').appendChild(card_div)            
        }      
    </script>