[Javascript] 엘리먼트 / 노드 / 태그 생성 createElement

jinwanseo 2021. 5. 24. 20:54

728x90

[자바스크립트] 엘리먼트 / 노드 / 태그 생성

Create Element / Node / Tag

기본 형태

//엘리먼트 생성
document.createElement(태그이름);

샘플 예제

<!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>CreateElement Example</title>
</head>
<body>
    <div class="container"></div>
    <script>
    	//h1 태그 생성
        const newElement1 = document.createElement('h1');
        //h1 태그 내 텍스트 설정
        newElement1.innerText = '안녕하세요';
        //h2 태그 생성
        const newElement2 = document.createElement('h2');
        //h2 태그 내 텍스트 설정
        newElement2.innerText = '메모를 메모하다 티스토리 입니다';

        document.querySelector('.container').append(newElement1,newElement2);
    </script>
</body>
</html>

실행 결과

728x90