선택요소를 추가하고 삭제하는방법. 트리구조

// 1.‘Home’이라고 적힌 <li> 태그를 생성하세요.
let liTag = document.createElement('li');
let liText = liTag.textContent = 'Home' 
// 2.insertBefore menu의 ()를 사용해서<li> 태그 앞에 'Home'을 삽입하세요.
let menu = document.getElementById("menu");
let lifast = menu.querySelector('li:first-child');
menu.insertBefore(liTag,lifast)
// 3. insertBefore()를 사용해서 calendar의 첫 번째 child로 예약 알람 문구를 삽입하세요.
let calendar = document.getElementById("calendar");
let div = document.createElement('div');
div.innerHTML = "<strong>안녕하세요!</strong> 예약하신 날짜입니다."
calendar.insertBefore(div, calendar.firstElementChild)
// insertBefore(삽일할 요소 , 삽입할위치)

// 4. removeChild()를사용해서 'Contact'라고 적힌 <li> 태그를 삭제하세요.
menu.removeChild(menu.lastElementChild)

위는 예시 코드.

 

DOM Tree 로 브라우저 형태 변형 - insertBefore()

DOM 요소를 다루는 연습을 해봅니다.

createElement를 이용해 요소를 반환하는 변수를 만들 수 있습니다.
<li> 태그를 생성하고 textContent로 해당 요소의 텍스트를 채워줍니다.

let li = document.createElement("li");
li.textContent = "Home";

id가 menu인 요소의 맨 앞에 위에서 생성한 li를 넣어주어야 합니다.
insertBefore를 이용하면 특정 요소 앞에 값을 넣을 수 있습니다.
현재 menu의 제일 앞에 있는 요소를 firstElementChild로 찾아, 해당 요소 앞에 넣어주면 됩니다.

menu.insertBefore(li, menu.firstElementChild);

같은 방식으로 <div> 요소를 만들어서 calendar 앞에 넣어줍니다.
단 이번에 삽입해야 하는 <div> 태그는 HTML이 포함되어 있기 때문에 textContent가 아닌 innerHTML을 이용해야 합니다.

let div = document.createElement("div");
div.innerHTML = "<strong>안녕하세요!</strong> 예약하신 날짜입니다.";
calendar.insertBefore(div, calendar.firstElementChild);

마지막으로 요소를 삭제하는 법을 확인해보겠습니다.
요소의 삭제는 removeChild를 이용해 삭제합니다. 삭제하는 요소가 menu의 제일 마지막에 있는 요소이므로, menu.lastElementChild를 이용하면 됩니다.

menu.removeChild(menu.lastElementChild);

답안 코드

// 1.‘Home’이라고 적힌 <li> 태그를 생성하세요.
let li = document.createElement("li");
li.textContent = "Home";

// 2.insertBefore()를 사용해서 menu의 <li> 태그 앞에 'Home'을 삽입하세요.
let menu = document.getElementById("menu");

menu.insertBefore(li, menu.firstElementChild);

// 3. insertBefore()를 사용해서 calendar의 첫 번째 child로 예약 알람 문구를 삽입하세요.
let calendar = document.getElementById("calendar");

let div = document.createElement("div");
div.innerHTML = "<strong>안녕하세요!</strong> 예약하신 날짜입니다.";
calendar.insertBefore(div, calendar.firstElementChild);

// 4. removeChild()를사용해서 'Contact'라고 적힌 <li> 태그를 삭제하세요.
menu.removeChild(menu.lastElementChild);