문서 객체 생성하기
body태그 내부에 있는 특정 문서 객체를 읽어들이고 조작하는 것도 가능하나
문서 객체를 생성하는 것도 가능
문서 객체를 생성하고 싶을 때는 document.createElement() 메소드를 사용
문서 객체를 만든 후에는 문서 객체를 추가해야함
appendChild() 매소드를 활용하면 어떤 부모 객체 아래에 자식 객체를 추가할 수 있음
부모객체.appendChild(자식객체);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
*/
document.addEventListener('DOMContentLoaded', () => {
// 문서 객체 생성하기
const header = document.createElement('h1');
// 생성한 태그 조작하기
header.textContent = '문서 객체 동적으로 생성하기';
header.setAttribute('data-custom', '사용자 정의 속성');
header.style.color = 'white';
header.style.backgroundColor = 'black';
console.log(header);
// h1 태그를 Body 태그 아래에 추가하기
document.body.appendChild(header);
})
</script>
</head>
<body>
</body>
</html>
