DOM 요소 변형 - insertBefore(), removeChild()

✅insertBefore()와 removeChild()를 활용한 DOM 요소 변형

 

실습문제 1.

↓↓↓↓↓↓ 초기값

Mission

1. 첫 번째 묶음의 나열된 값들 중 첫번째 요소를 삭제하고 하나의 값을 추가하기

2. 두 번째 묶음의 나열된 값들 앞에 텍스트 추가하고 '과일'은 굵게 표시하기

 

↓↓↓↓↓↓ 실행 결과

 

let fruits = document.getElementById('fruits');
let fruits_li = document.createElement('li');
fruits_li.textContent = 'Tomato';
fruits.insertBefore(fruits_li, fruits.firstElementChild);

- 하나의 값을 추가할 때, 그냥 추가하는 것이 아닌 "li" tag를 새로 생성한 뒤 텍스트를 추가해서

최종적으로 현재 리스트에 값을 추가해줘야함

- insertBefore 메서드를 통해 나열된 값들의 첫번째 자식 요소 노드 앞에 삽입

* 부모노드.insertBefore(삽입할 노드, 기준 노드)

 

let buy = document.getElementById('buy');
let buy_text = document.createElement('div');
buy_text.innerHTML = "<strong>과일</strong> 구매한 날짜";
buy.insertBefore(buy_text, buy.firstElementChild);

- 태그가 포함된 텍스트를 넣을 때는, innerHTML을 사용

- insertBefore 메서드를 통해 나열된 값들의 첫번째 자식 요소 노드 앞에 삽입

 

let contact = fruits.lastElementChild;
fruits.removeChild(contact)

- removeChild 메서드를 통해 나열된 값들의 마지막 자식 요소 노드 제거

* 부모노드.removeChild(제거할 자식노드)