요소 노드 추가하기
다음과 같은 HTML 태그가 있다고 할 때, 내일 할일을 추가해보려고 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</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. 요소 노드 생성 : document.createElement('태그이름')
원하는 태그 이름으로 요소 노드를 만들 수 있음.
const first = document.createElement('li');
2. 요소 노드 꾸미기 : textContent, innerHTML, ...
first.textContent = '처음';
3. 요소 노드 추가하기 : NODE.prepend, append, after, before
tomorrow.prepend(first);method 를 호출한 젤 첫번째 노드로 파라미터로 전달한 값을 추가할 수 있음
다음과 같이 원하는 위치에 자유자재로 추가할 수 있음.
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);'JavaScript > Interactive JavaScript' 카테고리의 다른 글
| [JavaScript] 이벤트 핸들러 등록하기 (0) | 2023.04.28 |
|---|---|
| [JavaScript] 노드 삭제와 이동하기 (0) | 2023.04.24 |
| [JavaScript] DOM (0) | 2023.04.11 |
| [JavaScript] css 선택자로 태그 선택하기 (0) | 2023.04.11 |
| [JavaScript] 태그 이름으로 태그 선택하기 (0) | 2023.04.11 |