<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>할 일</title>
</head>
<body>
<div>
<h1>오늘 할 일</h1>
<ol id="today">
<li>공부</li>
<li>청소</li>
<li>쇼핑</li>
</ol>
<h1>내일 할 일</h1>
<ol id="tomorrow">
<li>공부</li>
<li>예매</li>
<li>유튜브 시청</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
1. 기존의 문서 구조를 덮어쓰는 방식 - innerHTML과 outerHTML의 문제점
const today = document.querySelector('#today');
today.innerHTML = '<li>처음</li>' + today.innerHTML;
today.innerHTML = today.innerHTML + '<li>마지막</li>';
today.outerHTML = '<p>이전</p>' + today.outerHTML;
const newToday = document.querySelector('#today');
newToday.outerHTML = newToday.outerHTML + '<p>다음</p>';
- innerHTML이나 outerHTML 프로퍼티는 기존의 내용을 덮어쓰는 방식으로 동작하기 때문에, 기존 내용을 보존하려면 기존의 값을 한 번 더 활용해야 한다. 이때 내용을 그대로 덮어 씌워 버려서 기존 데이터가 사라져 버리는 실수가 발생할 수 있다.
- 심지어 outerHTML은 한 번 프로퍼티를 수정하게 되면 완전히 새로운 요소가 되어 버려서 이후에 해당 요소를 다시 다루려면 새롭게 다시 그 요소를 찾아야 하는 문제도 발생한다.
2. 요소 노드를 직접 생성해서 필요한 곳에 추가하는 방식
const today = document.querySelector('#today');
today.innerHTML = '<li>처음</li>' + today.innerHTML;
today.innerHTML = today.innerHTML + '<li>마지막</li>';
today.outerHTML = '<p>이전</p>' + today.outerHTML;
const newToday = document.querySelector('#today');
newToday.outerHTML = newToday.outerHTML + '<p>다음</p>';
// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');
// 1. 요소 노드 만들기 : documnet.createElement('태그이름')
const first = document.createElement('li');
// 2. 요소 노드 꾸미기 : textContent, innerHTML, ...
first.textContent = '처음';
// 3. 요소 노드 추가하기 : Node.prepend, append, after, before
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);
- 요소 노드 추가는 세 가지 단계로 이루어진다.
- 첫 번째는 요소 노드를 만드는 것이다. document 객체의 createElement라는 메소드를 활용해 원하는 태그 이름으로 요소 노드를 만들 수 있다.
- 두 번째는 요소 노드를 꾸며주는 것이다. textContent나 innerHTML을 활용할 수 있다.
- 세 번째는 요소 노드를 추가하는 것이다. prepend라는 메소드를 이용하면 메소드를 호출한 노드의 제일 첫 번째 노드로 파라미터로 전달한 값을 추가할 수 있다.
