요소노드 추가하기

innerHtml,outerHtml로 수정하면 내용을 덮어써버려서 기존데이터가 사라질수가있다.

기존문서 구조를 덮어쓰는게 아닌 새로운 요소노드를 추가해보자.

<요소노드 추가하기>

1.요소노드 만들기 : document.createElement('태그이름')
2.요소노드 꾸미기 : textContent, innerHTML,...
3.요소노드 추가하기 : NODE.prepend, append, after, before

// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');

// 1. 요소 노드 만들기
const first = document.createElement('li');

// 2. 요소 노드 꾸미기
first.textContent = '처음';

// 3. 요소 노드 추가하기
tomorrow.prepend(first);

const last = document.createElement('li');
last.textContent = '마지막';
tomorrow.append(last);

const prev = document.createElement('p');
prev.textContent = '이전';
tomorrow.before(prev);

const next = document.createElement('p');
next.textContent = '다음';
tomorrow.after(next);