.wrap, document.createElement, .innerHtml, .addEventListener, .target.parentElement.parentElement.parentElement.parentElement;

.wrap()

.wrap()은 선택한 요소를 원하는 태그로 감쌉니다.

.wrap( wrappingElement )

예를 들어

$( 'p' ).wrap( '<div></div>' );

는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다.

$( 'p' ).wrap( '<div id="ab" class="cd"></div>' );

여러 태그로 감쌀 수도 있습니다.

$( 'p' ).wrap( '<div><strong></strong></div>' );

 

.createElement

const div = document.createElement("div");

div라는 요소를 만듬.

이 요소에

 

.innerHTML

div.innerHTML="<div class='main-button-out'><div class='main-button-in'><button>⨉</button></div></div>"

를 하면 이 div안에 위와 같은 html을 그려 넣어라는 뜻임.

<div class='main-button-out'><div class='main-button-in'><button>⨉</button></div></div>

가 만들어짐.

 

이것에 

 

.addEventListener

이 div의 이벤트 리스너를 달아주는 것.

div.addEventListener("click", deleteToDo);

를 달아서 클릭하면 deleteToDo의 함수가 실행 되게끔 할 수도 있음.

 

function deleteToDo(event){
    const li = event.target.parentElement.parentElement.parentElement.parentElement;
    console.log(li.id);
    toDos=toDos.filter(toDo => toDo.id !== parseInt(li.id));
    li.remove();
    saveToDos();
}

 

여기서 

li의 id값을 가져오게끔 

.target.parentElement

.parentElement 할때마다 타겟 위치의 한칸 위에 것을 가져옴.

.target.parentElement.parentElement.parentElement.parentElement;

처리 가능.

 

 

다시

function paintToDo(newTodoObj){    
    const div = document.createElement("div");
    div.innerHTML="<div class='main-button-out'><div class='main-button-in'><button>⨉</button></div></div>"
    div.addEventListener("click", deleteToDo);


    li.appendChild(span);
    li.appendChild(div);
    toDoList.appendChild(li);
    
}

.appendChild 

li.appendChild(div);

li에 있는 자식 div를 달 수 있음.

로 돌아가서 

 

const toDoList = document.getElementById("todo-list");

이 자식의 Id에 있는 곳에 저 부분을 추가해라는 뜻임.