파게로그
DOM에서 element 생성 또는 제거 본문
element 생성
// 리스트 하나를 생성하는 경우
// 1. element 생성
const newUl = document.createElement("ul"),
newLi1 = document.createElement("li"),
newLi2 = document.createElement("li");
// 2. li를 ul에 붙임
newUl.appendChild(newLi1);
newUl.appendChild(newLi2);
// 3. ul을 필요한 곳에 붙임
document.querySelector("body").appendChild(newUl)
element 제거
// 예를 들어, li 안에 delBtn이 있고, 이를 누르면 li가 지워짐
function handleDelBtnClick(event) {
event.preventDefault();
const clickedBtn = event.target;
const clickedLi = clickedBtn.parentNode;
// console.dir(e.target)을 통해서 parentNode에 대해서 알 수 있음
ul.removeChild(clickedLi);
}
create newBtn = document.createElement("button");
newBtn.innerText = 'DELETE';
newBtn.addEventListener("click", handleDelBtnClick);
'콤퓨타 왕기초 > JS' 카테고리의 다른 글
유용한 libs, APIs (0) | 2020.10.15 |
---|---|
JSON 다루기 (0) | 2020.10.15 |
array (0) | 2020.10.15 |
event, event handlers (2) (0) | 2020.10.12 |
event, even handlers (1) (0) | 2020.10.12 |
Comments