Step04_createElement(createElement, append, this, remove)스터디

 

createElement

 

javaScript를 통해 HTML 요소를 생성한다.

 

ex) createElement

let div = document.createElement('div'); //div 추가
let div = document.createElement('div class=myDiv'); // css를 가진 div를 추가

 

append()

선택된 요소의 마지막에 새로운 요소나 컨텐츠를 추가한다.

prepend()

선택된 요소의 첫번째에 새로운 요소나 컨텐츠를 추가한다.

 

 

 

목록을 추가하고 삭제할 수 있는 기능을 만들려고 한다.

 

로드한 상황

목록 변경

목록 삭제

html css

javascript

 

let li = document.creatElement("li");

JavaScript를 통해 HTML 요소를 생성하기 위하여 createElement()를 사용할 수 있다.

 

document.querySelector("#list").append(li);

append를 사용하여 만들어진 li를 list(ul 태그)의 자식요소로 추가했다.

 

this를 사용하여 클릭한 li를 지정하고 조건문 if로 조건을 충족할시 remove()함수를 활용하여 this(해당 li)를 제거하는 코드를 작성했다. 여기서 this는 해당 이벤트가 일어난 그 요소를 가르킨다.

 

클릭한 특정 li를 삭제하는 코드를 add함수 안의 코드와 global area 코드로 나눠놨다.

add함수 안의 코드 - 엔테키 혹은 버튼을 누르고 만들어진 목록을 삭제 가능하게 만든다. 

global area 코드 - 로드 시점의 목록을 삭제 가능하게 만들었다. for 반복문을 활용하여 각각의 목록에 addEventListener가 적용되게 작성했다.