Calendar 만들면서 배운 것들 [querySelector, insertAdjacentHTML]

document.querySelector("#calendar").insertAdjacentHTML("beforeend", calendar_doc);

calendar 만들때 사용했던 코드입니다.

<div id="calendar">
    ...
</div>

querySelector

이 친구를 통해 id가 calendar인 친구(#calendar)의 엘리먼트들을 가져옵니다.

만약 어떤 변수를 선언하고 함수를 수행했으면 선언한 변수에 가져오려 했던
엘리먼트들이 저장이 될 것 입니다.

insertAdjacentHTML

이 친구는 HTML 같은 특정 텍스트를 파싱하고, 원하는 위치에 넣고자 하는 text를 넣을 수 있게 해준다.

element.insertAdjacentHTML(position, text);

position은 아래 4개의 단어만 사용이 가능하다.

 

beforebegin
element 앞

 

afterbegin
element 안 가장 첫번째 child

 

beforeend
element 안 가장 마지막 child

 

afterend
element 뒤

 

나는 div태그 안에 넣기를 원했기 때문에 beforeend를 사용하였다.

(검색해보니 innerHtml과는 조금 다르고, 작업이 더 빠르다고 한다.)