JavaScript_요소추가제거

input 요소 생성

const input = document.createElement("input");
input.classList.add("in");

요소의 속성을 추가하거나 변경할 때 사용하는 함수

요소.setAttribute("속성명", "속성값");
요소.removeAttribute("속성명") : 속성 제거

input 에 type="number" 추가
input.setAttribute("type", "number");

// span에 click 이벤트 동작 추가(동적 요소에 이벤트 추가)
    span.addEventListener("click", function() {

        // 클릭된 X버튼의 부모 요소(div.row)를 삭제
        // 요소.remove() : 해당요소를 제거
        this.parentElement.remove();
        console.log(this.parentElement);

    })

클릭 이벤트 동작시 아래 조립된 형태의 span에 부모인 div

div > input, span 조립

div.append(input, span);

화면에 추가된 input에 포커스

input.focus();

동적 이벤트 추가하는 곳에 동적 이벤트 삭제

정적이벤트는 실행 시점으로 본다

계산 버튼 클릭되었을 때
input 요소에 작성된 값을 모두 얻어와 합한 후 출력