DOM을 활용한 예제
<!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="h1Tag">클릭 한번 해볼까요?</h1>
<button id="h1Btn" onclick="ckh1Btn()">h1 태그 생성</button>
<button id="aBtn" onclick="ckaBtn()">a 태그 생성</button>
<button id="ulBtn" onclick="ckulBtn()">ul 태그 생성</button>
<div id="box"></div>
<script>
/*
누른 버튼에 따라 각각 다른 값들이 id가 box인 div안에 누적되도록
만약 => h1Btn => <h1>h1입니다.</h1>
=> aBtn => <a href ="www.google.com">Google로 이동 </a>
=> ulBtn => <ul><li>마라탕</li></ul>
*/
let box = document.getElementById("box")
const ckh1Btn = () => {
console.log("h1 btn");
box.innerHTML += "<h1>h1입니다.</h1>"
}
const ckaBtn = () => {
console.log("a btn");
box.innerHTML += "<a href= # > Google로 이동 </a>"
}
const ckulBtn = () => {
console.log("ul btn");
box.innerHTML += "<ul><li>h1입니다.</li></ul>"
}
</script>
</body>
</html> /*
누른 버튼에 따라 각각 다른 값들이 id가 box인 div안에 누적되도록
만약 => h1Btn => <h1>h1입니다.</h1>
=> aBtn => <a href ="www.google.com">Google로 이동 </a>
=> ulBtn => <ul><li>마라탕</li></ul>
*/
let box = document.getElementById("box")버튼을 누를 때마다 div 태그 안에 각 태그를 넣으려고 한다. 그렇다면 일단 HTML의 div 요소를 가져와야 한다. 앞에서 배웠듯이 document.getElementById("box")를 box 변수에 넣어준다.
const ckh1Btn = () => {
console.log("h1 btn");
box.innerHTML += "<h1>h1입니다.</h1>"
}
const ckaBtn = () => {
console.log("a btn");
box.innerHTML += "<a href= # > Google로 이동 </a>"
}
const ckulBtn = () => {
console.log("ul btn");
box.innerHTML += "<ul><li>h1입니다.</li></ul>"
}버튼을 누르면 실행될 함수를 만들어보겠다. HTML 문서안의 div의 아이디가 "box"고 거기 안에 새로운 태그를 추가할 거니까 innerHTML += 를 사용하면 된다. innerText가 아니라는 걸 이해해야 한다.
<h1 id="h1Tag">클릭 한번 해볼까요?</h1>
<button id="h1Btn" onclick="ckh1Btn()">h1 태그 생성</button>
<button id="aBtn" onclick="ckaBtn()">a 태그 생성</button>
<button id="ulBtn" onclick="ckulBtn()">ul 태그 생성</button>
<div id="box"></div>클릭 했을 때 함수를 실행시킬 거니까 태그의 속성으로 onclick="함수이름"을 적어준다. (새롭게 배운 점)
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] Ex10_이벤트 실습.html (0) | 2023.06.19 |
|---|---|
| [JS] Ex09_이벤트.html (0) | 2023.06.19 |
| [JS] Ex07_DOM.html (6 없음) (0) | 2023.06.19 |
| [JS] Ex05_객체실습.html (0) | 2023.06.19 |
| [JS] Ex04_객체.html (0) | 2023.06.19 |
