[Javascript] 자식 엘리먼트 / 노드 / 태그 추가 append

jinwanseo 2021. 5. 24. 21:13

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