728x90
반응형
참고: https://www.javascripttutorial.net/javascript-dom/javascript-appendchild/
이 포스트에서는 특정 부모 노드의 자식 목록에 노드를 추가하는 JavaScript의 appendChild() 메소드에 대해 알아보겠습니다.
appendChild() 메소드
appendChild() 메소드는 Node 인터페이스의 메소드입니다. appendChild() 메소드를 사용하면 지정된 상위 노드의 하위노드 목록 마지막에 노드를 추가할 수 있습니다.
다음은 appendChild() 메소드의 문법을 보여줍니다:
parentNode.appendChild(childNode);이 메소드에서 childNode는 주어진 부모노드에 추가할 노드 입니다. appendChild()는 리턴 값으로 추가된 자식노드를 리턴합니다.
childNode가 이미 document에 존재할 경우, appendChild() 메소드는 childNode를 기존 위치에서 새로운 위치로 이동 시킵니다.
appendChild() 예제
appendChild() 메소드를 사용하는 예제를 살펴보겠습니다.
1) 단순 appendChild() 예제
다음 HTML markup이 있다고 가정해보겠습니다.
<ul id="menu">
</ul>다음의 예제에서는 appendChild() 메소드를 사용하여 세 개의 목록에 <ul> 요소를 추가합니다.
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// ul#menu 요소 얻기
const menu = document.querySelector('#menu');
// 메뉴 아이템 추가
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));작동 방식:
- 먼저 createMenuItem() 함수가 createElement() 메소드를 통해 특정한 이름의 목록 아이템을 생성합니다.
- 다음으로 id가 menu인 <ul> 요소를 querySelector() 메소드로 찾습니다.
- createMenuItem() 함수를 호출해 새 메뉴 항목을 만들고 appendChild() 메소드를 사용해 <ul> 요소에 추가합니다.
결과:
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
</ul>
전체 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript appendChild() Demo</title>
</head>
<body>
<ul id="menu">
</ul>
<script>
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
const menu = document.querySelector('#menu');
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
</script>
</body>
</html>2) document 내에서 node 이동
다음 두 개의 목록이 있다고 가정합니다:
<ul id="first-list">
<li>Everest</li>
<li>Fuji</li>
<li>Kilimanjaro</li>
</ul>
<ul id="second-list">
<li>Karakoram Range</li>
<li>Denali</li>
<li>Mont Blanc</li>
</ul>다음의 코드는 appendChild() 메소드를 통해 첫 번째 목록에 있는 요소를 두 번째 목록으로 이동하는 예제입니다:
const firstList = document.querySelector('#first-list');
const everest = firstList.firstElementChild;
const secondList = document.querySelector('#second-list');
secondList.appendChild(everest)작동 방식:
- querySelector() 메소드를 사용해 id가 first-list인 요소를 선택합니다.
- 다음으로 첫 번째 목록에서 첫 번째 아이템을 선택합니다.
- querySelector() 메소드로 id가 second-list인 두 번째 목록을 선택합니다.
- appendChild() 메소드를 사용해 첫 번째 목록의 첫 번째 아이템을 두 번째 목록에 추가합니다.
전체 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript appendChild() Demo</title>
</head>
<body>
<ul id="first-list">
<li>Everest</li>
<li>Fuji</li>
<li>Kilimanjaro</li>
</ul>
<ul id="second-list">
<li>Karakoram Range</li>
<li>Denali</li>
<li>Mont Blanc</li>
</ul>
<script>
const firstList = document.querySelector('#first-list');
const everest = firstList.firstElementChild;
const secondList = document.querySelector('#second-list');
secondList.appendChild(everest)
</script>
</body>
</html>정리
- appendChild() 메소드를 사용해 특정 노드의 자식 목록 끝에 요소를 추가할 수 있습니다.
- appendChild()는 document에 존재하는 기존 요소를 새 노드의 자식으로 이동시킬 수 있습니다.
관련 글
반응형
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 스크롤 애니메이션 (2) | 2023.03.12 |
|---|---|
| [javascript] CSS scroll indicator (수평 스크롤바) (0) | 2023.03.12 |
| [javascript] 자바스크립트 배열 splice() 사용 방법 (1) | 2023.03.03 |
| [javascript] 자바스크립트 애니메이션 RequestAnimationFrame (4) | 2023.02.27 |
| [javascript] 자바스크립트 체크박스 사용 방법 (3) | 2023.02.13 |
댓글