📢기존의 문서 구조를 덮어쓰는 방식이 아니라 요소 노드를 직접 생성해서 그 요소만 필요한 곳에 추가하는 방법을 살펴보자.
1. 요소 노드 만들기: document.createElement('태그이름')
const first = document.createElement('li');
오늘 할 일의 처음이라는 부분을 내일 할일에도 만들거라서 li태그로 만들어줬고
변수 이름도 내일 할 일의 첫 번째 요소로 들어갈 거라서 first로 만듦.
2. 요소 노드 꾸미기: textContent, innerHTML, ...
first.textContent = '처음';
지금은 그냥 처음이라는 문자만 넣어줄 거니까 textContent를 활용했지만
내부에 간단한 HTML 태그가 필요하면 innerHTML을 사용해도 됨
3. 요소 노드 추가하기: NODE.prepend, append, after, before
append: 대상을 node 의 마지막에 삽입
prepend: 대상을 node 의 가장 앞에 삽입
before: 대상을 node 이전에 삽입
after: 대상을 node 다음에 삽입
tomorrow.prepend(first);
1,2번을 통해 내부에 처음이라는 글자를 담고 있는 li 태그가 모두 완성.
이렇게 만들어진 태그를 어딘가 넣어줘야 화면에 반영이 됨.
prepend라는 메소드를 이용하면 메소드를 호출한 제일 첫번째 노드 파라미터로 전달한 값을
추가할 수 있다. 코드를 저장하고 실행하면 내일 할 일에도 처음이라는 li태그 생성됨.
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);//메소드를 호출한 노드의 뒤쪽에 파라미터로 전달한 값을 형제 노드로 추가.
