Javascript/이론
createElement /createTextNode/appendChild/insertBefore/setAttribute/모달이
SEOKIHOUSE
2023. 6. 2. 17:46
- createElement - 특정한 이름의 HTML element를 생성
- createTextNode - 텍스트 추가
- appendChild() - 자식으로 추가
이녀석을 making해보자
window.onload = function() {
let divfirst = document.createElement("div");
let aa= document.createTextNode("aaa");
let divs = document.createElement("div");
let uls = document.createElement("ul");
let lis = document.createElement("li");
let lis2 = document.createElement("li");
let lis3 = document.createElement("li");
let txt1 = document.createTextNode("1");
let txt2 = document.createTextNode("2");
let txt3 = document.createTextNode("3");
divfirst.appendChild(aa);
document.body.appendChild(divfirst);
divs.appendChild(uls);
uls.appendChild(lis);
uls.appendChild(lis2);
uls.appendChild(lis3);
lis.appendChild(txt1);
lis2.appendChild(txt2);
lis3.appendChild(txt3);
document.body.appendChild(divs);
- insertBefore(1,2) -->1을 2앞에 넣는다
- setAttribute -속성부여
여기서 주석친 부분을 만들어보자
<!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>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
}
#first {
background-color: aquamarine;
}
#demo {
background-color: cornflowerblue;
}
.boldLine {
border: 5px solid yellow;
}
</style>
<script>
window.onload = function () {
const div = document.createElement("div");
const txt = document.createTextNode("aaa");
const demo = document.querySelector("#demo");
div.appendChild(txt);
//앞에다가 추가할 경우 insertBefore (새거를 , 2여기 앞에다가 넣어라)
//insertBefore(1,2) -->1을 2앞에 넣는다
document.body.insertBefore(div, demo);
//아이디속성 부여
div.setAttribute("id","first");
//두번쨰 div생성
const div2 = document.createElement("div");
const txt2 = document.createTextNode("ㅠㅠㅠ");
div2.appendChild(txt2);
document.body.appendChild(div2);
div2.setAttribute("style" ,"background-color: skyblue; color: white;");
div2.setAttribute("class", "boldLine");
}
</script>
</head>
<body>
<!-- <div id="first">aaa</div> -->
<div id="demo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<!-- <div style="background-color: skyblue; color: white;" class="boldLine">ㅠㅠㅠ</div> -->
</body>
</html>
- modal : 팝업창같은거 엄연히 다르다
https://chlolisher.tistory.com/101 <<참고
<!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>Document</title>
<style>
#first {
position: absolute;
width: 100px;
height: 100px;
background-color: beige;
}
#second {
width: 200px;
height: 100px;
background-color: coral;
display: none;
position: absolute;
/* opacity: 0.7; */
}
#container {
position: relative;
}
#x {
background-color: palegreen;
width: 20px;
height: 20px;
text-align: center;
position: absolute;
top: 10px;
right: 10px;
border-radius: 10px;
}
#x:hover {
cursor: pointer;
}
</style>
<script>
window.onload = function () {
let first = document.querySelector("#first");
let x = document.querySelector("#x");
first.addEventListener("click", show);
x.addEventListener("click", hide);
function show() {
second.style.display = "flex";
}
function hide() {
second.style.display = "none";
}
}
</script>
</head>
<body>
<div id="container">
<div id="first">어서오세용 seok주점입니다</div>
<div id="second">
<div>손님: 추워 빨리 문 닫아..</div>
<div id="x">X</div>
</div>
</div>
</body>
</html>