Element의 생성 / 삭제 / 추가

        // 1. 생성 : createElement★★★
        // --> 문법 : document.createElement("tagname");
        // --> 하지만 이렇게 정의한것만으로는 아무일도 일어나지 않아.
        // --> 이걸 어디다 붙일건지가 중요!!!!

        function test1(){

            // 1-1. 생성
            const createLi = document.createElement("li");
            const createBtn = document.createElement("button");

            // 1-2. 정보변경
            createLi.innerText = "li추가중";
            createBtn.innerText = "이것이 버튼추가";

            // 1-3. 스타일변경
            createLi.classList.add("fs-2", "text-danger");

            // 1-4. 부모에게 붙이기
            const getTitleListBox = document.getElementById("titleListBox");
            getTitleListBox.appendChild(createLi); 
            getTitleListBox.appendChild(createBtn);
            // --> " " 안쓰는 이유? : 추가하고자 하는 실제 DOM 노드를 인수로 제공해야 함
            
        }

 

        // 2. 생성2

        function test2(){ // 순차적으로
            // 2-1. li만들고
            const createLi = document.createElement("li");

            // 2-2. li안에 첫번째 span
            const span1 = document.createElement("span");
            span1.innerText = "제목....";
            createLi.appendChild(span1);

            // 2-2. li안에 두번째 span
            // 순서 주의. x가 먼저 붙으면 안됨(삭제버튼이니까)
            const span2 = document.createElement("span");
            span2.innerText = " X ";
            createLi.appendChild(span2);

            // 2-3. titleListBox 뒤에 추가추가
            const titleBox = document.getElementById("titleListBox");
            titleBox.appendChild(createLi);

        }

 

        // 3. 요소 삭제

        function test3(){
            const getTitleListBox = document.getElementById("titleListBox");
            getTitleListBox.remove();
        }
                    // 이러면 box전체가 사라지니까 null뜨면서 내용 추가가 안되지?

 

        // 4. 요소 삭제2 (X를 누르면 그 줄이 삭제되도록)

        function test4(){
            const li = document.createElement("li");

            const span1 = document.createElement("span");
            span1.innerText = "제목....";
            li.appendChild(span1);

            const span2 = document.createElement("span");
            span2.innerText = " X ";
            span2.setAttribute("onclick", "removeTitle(this)");         // --> text2에 이 줄만 추가됨
            li.appendChild(span2);

            const titleBox = document.getElementById("titleListBox");
            titleBox.appendChild(li);

        }

        // 4-1. X를 누르면 그 줄을 지우는 function

        function removeTitle(targetElement){
            targetElement.parentElement.remove();
        }

 

        // 5. 내용 초기화 : .innerHTML --> 이 케이스에만 사용하기!!!!!!!!

        function test5(){
            const titleListBox = document.getElementById("titleListBox");
            // titleListBox.remove();   
            // --> 이런식으로하면 삭제는 되는데, 다시 추가시키려면 null exception! 리스트 자체가 삭제되는거니까..
            titleListBox.innerHTML = "";
        }

 

        // 6. 반복하는 것들 : 템플릿 만들어두기! --> 일반적으로 body맨밑쪽에 넣어둔다
        // 템플릿 - 수정할 일이 발생할 경우 하나하나 수정할 필요 없이 템플릿만 수정하면 됨

    <!-- 템플릿생성 -->
    <!-- d-none없이 그냥 두면 페이지 생성시 '제목제목 X 버튼'이 맨 밑에 써져있겠지 -->
    <!-- 보이지 않아야 하는 것들은 잘 숨겨줘야한다!!!!! -->
    <div id="templete" class="d-none">
        <li class="titleTemplete">
            <span class="title">제목제목</span>
            <span onclick="removeTitle(this)">X 버튼</span>
        </li>
    </div>

        // 그냥 cloneNode만 쓰면? : <li>만 복사.<span>은 복사x
        // (true)넣으면? : 깊은 복사. 
        //  ---> <span>까지 복사해서 리턴(새로만든 <li>를 리턴-복사본). 거의 100% true를 사용함

       
        function test6(){

            // 6-1. 템플릿 복사
            // const titleTemplete = document.getElementsByClassName("titleTemplete").cloneNode(true);
            const titleTemplete = document.querySelector("#templete > .titleTemplete").cloneNode(true);

            // 6-2. 데이터 조작
            titleTemplete.querySelector(".title").innerText = "제목...." + Math.random();

            // // 6-3. 합치기
            document.getElementById("titleListBox").appendChild(titleTemplete);

        }

        // ※ cloneNode 메서드 :
        // 배열 또는 NodeList에 적용할 수 없으며, 

            getElementsByClassName로 선택된 요소 컬렉션에는 cloneNode 메서드가 정의되어 있지 않습니다.
        // 반면, document.querySelector는 단일 요소만 반환하므로 

          해당 요소에 직접 cloneNode 메서드를 사용할 수 있습니다.