728x90
반응형
안녕하세요, Javascript에서 요소 노드를 추가하는 방법에 대해 간단히 정리해보겠습니다.
요소 노드를 추가하는 방법은 아래와 같이 3가지 순서를 따라 진행됩니다.
0. 수정하고 싶은 기존 요소노드 만들기
1. 요소 노드 만들기 : document.createElement('태그 이름')
2. 요소 노드 내용 꾸미기 : textContent, InnerHTML 등 사용
3. 요소 노드 추가하기 : Node.prepend, append, after, before
추가하기
prepend : 대상을 node의 가장 앞에 삽입
append : 대상을 node의 마지막에 삽입
before : 대상을 node 이전에 삽입
after : 대상을 node 다음에 삽입
<!-- 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>
<!-- JS -->
// 0. 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');
// 1. 요소 노드 만들기: document.createElement('태그이름')
const first = document.createElement('li');
// 2. 요소 노드 꾸미기: textContent, innerHTML, ...
first.textContent = '처음';
// 3. 요소 노드 추가하기: NODE.prepend, append, after, before
tomorrow.prepend(first); // prepend이므로 리스트의 첫번째로 들어간다
const last = document.createElement('li'); // 요소 노드 생성 (<li>)
last.textContent = '마지막'; // 요소 노드 내부 꾸미기
tomorrow.append(last); // append이므로 리스트의 마지막으로 들어간다
const prev = document.createElement('p'); // 요소 노드 생성 (<p>)
prev.textContent = '이전'; // 요소 노드 내부 꾸미기
tomorrow.before(prev); // before이므로 tomorrow <ol> 이전에 들어간다!
const next = document.createElement('p'); // 요소 노드 생성 (<p>)
next.textContent = '다음'; //요소 노드 내부 꾸미기
tomorrow.after(next); //after이므로 tomorrow <ol> 다음에 들어간다!
728x90
반응형
'Web 개발 > JS' 카테고리의 다른 글
| Javascript - 요소 노드 삭제 / 이동 (0) | 2021.06.29 |
|---|---|
| Javascript - innerHTML, outerHTML, textContent (0) | 2021.06.27 |
| Javascript - DOM (0) | 2021.06.26 |
| Javascript - CSS 선택자 선택 (0) | 2021.06.24 |
| Javascript - array(Quiz) (0) | 2021.06.22 |
댓글