728x90
[자바스크립트 / Javascript] 자식 엘리먼트 / 노드 / 태그 추가하기
.append()
기본 형태
//자식 노드 추가
부모노드.append(자식1,자식2,...);
샘플 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SetAttribute Example</title>
</head>
<body>
<ul class="menu"></ul>
<script>
//부모 노드 SELECT
const menu = document.querySelector('.menu');
//노드의 생성
const menuItem1 = document.createElement('li');
menuItem1.classList.add('item');
menuItem1.innerText = '메뉴1';
const menuItem2 = document.createElement('li');
menuItem2.classList.add('item');
menuItem2.innerText = '메뉴2';
const menuItem3 = document.createElement('li');
menuItem3.classList.add('item');
menuItem3.innerText = '메뉴3';
const menuItem4 = document.createElement('li');
menuItem4.classList.add('item');
menuItem4.innerText = '메뉴4';
//자식 노드의 추가는 1개 부터 얼마든지 추가가 가능하다
menu.append(menuItem1,menuItem2,menuItem3,menuItem4);
</script>
</body>
</html>
실행 결과
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 이벤트 버블링 방지 stopImmediatePropagation (0) | 2021.05.25 |
|---|---|
| [Javascript] 클래스 추가 / 삭제 / 포함 여부 확인 classList.(add/remove/contains) (0) | 2021.05.24 |
| [Javascript] 엘리먼트 속성 추가하기 setAttribute (0) | 2021.05.24 |
| [Javascript] 엘리먼트 / 노드 / 태그 생성 createElement (0) | 2021.05.24 |
| [Javascript] 엘리먼트 앞 / 뒤에 특정 엘리먼트 삽입하기 insertBefore, insertAdjacentElement (0) | 2021.05.24 |
댓글