본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

자식 추가

var newDiv = document.createElement("div");
newDiv.classname = "purple";
xxx.appendChild(newDiv);

var newItem = document.getElementById("item").value;
var li = document.createElement("li");
li.classname = "list-group-item";
li.appendChild(document.createTextNode(newItem));    # 텍스트 노드로 생성

var deleteButton = document.createElement("bottom");
deleteButton.classname = "btn btn-danger btn-sm float-right delete";
deleteButton.appendChild(document.createTextNode("삭제“));
li.appendChild(deleteButton);    # deleteButton을 li의 자식으로
itemList.appendChild(li);    # li를 itemList의 자식으로

삭제 알림띄우기

if (e.target.classList.contains("delete")){
    if (confirm("Are you sure?")){
        var li = e.target.parentElement;
        itemList.removeChild(li);
    }
}

태그 생성 후 텍스트 채우기

let li = document.createElement("li");
li.textContent = "Home";
div.innerHTML = "<strong>안녕하세요!</strong>ㅋㅋ”;

특정 요소 앞에 태그 넣기

menu.insertBefore(li, menu.firstElementChild);

요소 삭제

menu.removeChild(menu.lastElementChild);