▼ HTML,JavaScript 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</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>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의 고찰
innerHTML , uterHTML을 활용하여 문자열로 요소를 만들어서 자유롭게 HTML 태그를 추가할 수 있을 때,
//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>';
// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');innerHTML과 outerHTML은
기존의 내용을 덮어쓰는 방식으로도 동작하기 때문에
내용을 보존하러면 기존의 값을 한 번 더 활용해야 되고
잘못하면 내용을 덮어 씌워버려 기존 데이터가 사라져 버릴 수도 있다.
또한 outerHTML의 경우에는 한번 프로퍼티를 수정하게 되면
완전히 새로운 요소가 되어 버려서 그 이후에 그 요소를 다루려면
새롭게 다시 그 요소를 찾아야하는 문제도 생긴다.
이러한 문제를 해결하기위해
기존의 문서 구조를 덮어쓰는 방식이 아니라 요소 노드를 직접 생성해서
그 요소만 필요한 곳에 추가하는 방법을 알아보자
1. 요소 노드 만들기 - document.createElement('태그이름')
document 객체의 createElement라는 메소드를 활용하면
원하는 태그 이름으로 요소 노드를 만들 수 있다.
// 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>';
// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');
console.log('--------------------------------------------------');
// 1. 요소 노드 만들기 - document.createElement('태그이름')
const first = document.createElement('li')HTML 문서를 보면 '내일 할 일'의 첫 번째 요소로 넣기위해 변수 이름을 'first'로 지정하였고
'오늘 할 일'의 '처음' 이라는 부분을 '내일 할 일'에도 만들기위해 li 태그를 만들었다.
이제 만들어진 요소 노드를 꾸며보자
2. 요소 노드 꾸미기 - textContent, innerHTML .....
'처음'이라는 문자를 넣기위해 textContent를 활용하였다.
또한 내부에 간단한 HTML 태그가 필요하다면 innerHTML을 사용할 수 있다.
// 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>';
// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');
console.log('--------------------------------------------------');
// 1. 요소 노드 만들기 - document.createElement('태그이름')
const first = document.createElement('li')
// 2. 요소 노드 꾸미기 - textContent, innerHTML....
first.textContent = '처음'
이제 내부에 '처음'이라는 글자를 담고 있는 li태그가 모두 완성되었는데,
이렇게 만들어진 태그를 화면에 담기위해 'prepend' 라는 메소드를 이용한다.
3. 요소 노드 추가하기 - NODE.prepend, append, after, before
▼ prepend 메소드
'prepend' 라는 메소드를 이용하면 메소드를 호출한 노드의
제일 첫 번째 노드로 파라미터로 전달한 값을 추가할 수 있다.
// 3. 요소 노드 추가하기: NODE.prepend, append, after, before
tomorrow.prepend(first);
최종적으로 '내일 할 일'에도 '처음'이라는 li 태그가 추가가 되었다.
나머지 부분도 작성해보자
▼ append 메소드
append 메소드는 파라미터로 전달한 값을 메소드를 호출한 노드의 제일 마지막 자식 노드에 추가
const last = document.createElement('li')
last.textContent = '마지막'
tomorrow.append(last)
▼ before 메소드
메소드를 호출한 노드의 앞쪽에 파라미터로 전달한 값을 형제 노드에 추가
const prev = document.createElement('p')
prev.textContent = ('이전')
tomorrow.before(prev)
▼ after 메소드
메소드를 호출한 노드의 뒤쪽에 파라미터로 전달한 값을 형제 노드에 추가
const next = document.createElement('p')
next.textContent = ('다음')
tomorrow.after(next)
이 메소드들은 꼭 요소 노드를 추가할 때만 사용되는 것이 아니라
파라미터로 그냥 문자열을 전달해도 된다.▼
const prev = document.createElement('p')
prev.textContent = ('이전')
tomorrow.before('문자열') //변수 prev에서 '문자열'로 수정
이렇게 자동으로 텍스트 노드가 생성이 되어서 추가되는 것을 확인할 수 있다.
또, 이 메소드들을 호출하는 때 여러 개의 값을 전달하면
전달한 순서대로 노드를 한번에 추가할 수 있다.▼
const prev = document.createElement('p')
prev.textContent = ('이전')
// tomorrow.before(prev)
// tomorrow.before('문자열')
tomorrow.before('문자열',prev) //여러개 값 전달
한가지 조심해야할 부분은 'prepend' 나 'before'의 경우에
요소를 앞으로 추가하기 때문에 여러 개의 값을 전달하게 되면
하나씩 앞으로 추가하면서 역순으로 추가될 거라는 오해가 있을 수도 있다.
방금한 것처럼 전달한 순서 그대로 파라미터를 한 번에 해당 위치에 추가한다는 점이라는 것을 햇갈려하지 말자.
이렇게 DOM 메소드를 활용해서 요소를 추가하였다.
▶GitHub
JavaScript_soloPlay/interactive_JS/08.요소노드추가하기 at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
'JS' 카테고리의 다른 글
| (10) Interactive JavaScript - HTML 속성 다루기 (0) | 2024.10.15 |
|---|---|
| (9) Interactive JavaScript - 요소 노드 삭제 및 이동 (0) | 2024.10.14 |
| (7) Interactive JavaScript - 요소 노드 프로퍼티 (0) | 2024.10.10 |
| (6) Interactive JavaScript - Approach the DOM Tree (0) | 2024.10.09 |
| (5) Interactive JavaScript - Document Object Model(DOM) (0) | 2024.10.09 |