<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element</title>
<style>
div {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.item {
display: flex;
border: 1px solid grey;
width: 200px;
}
.item > div {
padding: 10px;
border: 1px solid blue;
flex: 1;
}
</style>
</head>
<body>
<h1>05-element.html</h1>
<hr>
<div id="root"></div>
<script>
// getElementById() : id속성을 지정하여 문서 요소를 가져온다
const root = document.getElementById('root') // selectOne()
// 1) createElement와 appendChild를 이용하여 요소 추가하기
const nameDiv = document.createElement('div') // 태그이름 지정
nameDiv.classList.add('name') // 클래스 이름 추가
nameDiv.innerText = '이지은' // 시작태그와 마무리태그 사이 글자
const ageDiv = document.createElement('div')
ageDiv.classList.add('age')
ageDiv.innerText = 31
const item = document.createElement('div')
item.classList.add('item')
item.appendChild(nameDiv) // A.appendChild(B)
item.appendChild(ageDiv) // A요소의 자손에 B를 추가한다
root.appendChild(item)
// 2) innerHTML 을 활용하여 직접 태그를 작성하기
let tag = ''
tag += '<div class="item">'
tag += ' <div class="name">홍진호</div>'
tag += ' <div class="age">42</div>'
tag += '</div>'
root.innerHTML += tag
// 3) 자바스크립트 변수의 값을 태그에 포함시키기
const name3 = '나단비'
const age3 = 5
let tag3 = ''
tag3 += '<div class="item">'
tag3 += ' <div class="name">' + name3 + '</div>'
tag3 += ' <div class="age">' + age3 + '</div>'
tag3 += '</div>'
root.innerHTML += tag3
// 4) 백틱을 활용하여 같은 코드 수행하기
// 문자열 더하기를 수행하지 않아도 된다
// JSP페이지에서는 사용할 수 없다 (EL Tag와 표현형식이 같아서)
const name4 = '김지수'
const age4 = 28
let tag4 = ``
tag4 += `<div class="item">`
tag4 += ` <div class="name">${name4}</div>`
tag4 += ` <div class="age">${age4}</div>`
tag4 += `</div>`
root.innerHTML += tag4
</script>
</body>
</html>
Never give up!!