자바스크립트에서 동적으로 html요소를 추가하려면 밑의 양식처럼 하면된다.
let p1 = document.createElement("p").innerText = "p1 입니다";
document.querySelector("#one").append("p1");
document.createElement("p")
// <p></p>document.createElement는 element의 참조값을 반환하여 <div></div>, <p></p>라는 코드를 생성한다.
let p = document.createElement("p")
p.innerText = "p1 입니다";변수에 참조값을 가르키게 하고 innerText를 설정한다.
document.querySelector("#one").append("p");div의 id인 one을 찾은 뒤 append로 p를 추가해준다.
예제 1
/*
만들기 버튼을 누르면
<p>버튼으로 추가</p>
모양의 요소를 자바스크립트로 만들어서 위의 div에 추가해보세요
*/
document.querySelector("#makeBtn").addEventListener("click",function(){
let p2 = document.createElement("p").innerText = "버튼으로 추가";
document.querySelector("#one").append("p2");
});예제 2
/*
input요소에 메세지를 입력하고 추가 버튼을 누르면
li 요소가 동적으로 만들어지고
입력한 메세지는 li요소의 innerText로 출력해서
ul 요소의 자식요소로 추가해보세요.
*/
document.querySelector("#one").addEventListener("click",function(){
msg = document.querySelector("#inputMsg").value;
let li = document.createElement("li");
li.innerText = msg;
document.querySelector("#msgList").append(li);
});예제 3
/*
이미지 추가 버튼을 누르면
<img src = "images/kim1.png" alt="김구라 이미지">
요소를 만들어서 위의 div에 추가되도록 해보세요.
*/
document.querySelector("#addBtn").addEventListener("click",function(){
let img = document.createElement("img");
img.setAttribute("src","images/kim1.png");
img.setAttribute("alt","김구라 이미지");
document.querySelector("#one").append(img);
});img에 속성을 추가하려면 setAttribute를 사용하면된다.
예제 4
<!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>Step06_createElement4.html</title>
</head>
<body>
<input type="text" id="inputMsg" placeholder="메세지 입력...">
<button id="addBtn">추가</button>
<button id="prependBtn">앞에 추가</button>
<ul id="msgList">
<li>하나</li>
<li>두울</li>
</ul>
<script>
/*
input요소에 메세지를 입력하고 추가 버튼을 누르면
li 요소가 동적으로 만들어지고
입력한 메세지는 li요소의 innerText로 출력해서
ul 요소의 자식요소로 추가해보세요.
*/
document.querySelector("#addBtn").addEventListener("click",function(){
let msg = document.querySelector("#inputMsg").value;
let li = document.createElement("li");
li.innerText = msg;
document.querySelector("#msgList").append(li);
});
document.querySelector("#prependBtn").addEventListener("click",function(){
let msg = document.querySelector("#inputMsg").value;
let li = document.createElement("li");
li.innerText = msg;
// beforebegin, afterbegin, beforeend, atferend
/*
beforebegin
<ul>
afterbegin
내용
beforeend
</ul>
afterend
*/
document.querySelector("#msgList").insertAdjacentElement("afterbegin",li);
});
</script>
</body>
</html>'WEB' 카테고리의 다른 글
| [JavaScript] innerText 와 innerHTML 비교하기 (0) | 2021.10.14 |
|---|---|
| [JavaScript] this (0) | 2021.10.14 |
| [JavaScript] 조건문 / if / else if / else (0) | 2021.10.13 |
| [JavaScript] forEach (0) | 2021.10.13 |
| [JavaScript] 전역변수(Global) / 지역변수(Local) (0) | 2021.10.13 |
