<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="tit">클릭 한번 해볼까요?</h1>
<button onclick="mkH1()">h1태그 생성</button>
<button onclick="mkA()">a태그 생성</button>
<button onclick="mkUl()">ul태그 생성</button>
<!-- div는 생성한 태그를 누적할 공간 -->
<div id="divTag"></div>
<script>
// 1. 글자를 누적해줄 공간인 div(요소 객체)정보 가지고오기 -> 변수에 담아주도록 하겠습니다
let divVal = document.getElementById('divTag');
// 2. 함수 별로 가지고 온 내용을 div 태그안에 담아주기
mkH1=() => {
divVal.innerHTML += '<h1>h1태그 생성</h1>';
}
mkA=() => {
divVal.innerHTML += '<a href = "#">a태그 생성</a>';
}
mkUl=() => {
divTag.innerHTML += '<ul><li>ul태그 생성</li><li>li태그 생성</li></ul>';
}
</script>
</body>
</html>
개발자