5일차(5) javascript 기초 : 동적 요소 만들기
- 문서 객체를 동적으로 만들고 수정하는 실습.
먼저 console 창에서 리스트를 추가하는 실습!
마지막 노란색 부분까지 작성하면 페이지에 "사과"가 추가된다.
.createElement(" ") : 요소를 동적으로 만들어 요소를 추가할 수 있게 하는 함수
document.createElement("div")
: 콘솔창에 이렇게 <div></div>를 만들어두면 heap영역이 생겨서 key 값이 생긴다.
document.querySelector("ul").append(a);
: 그전에 'a'라는 변수에 <li>사과</li>를 만들어두었음. "ul"의 자식요소로 a를 넣은 것!
- 페이지 로딩시점엔 만들어지지 않았던 객체를 javascript로 원하는 시점에 끼워넣을 수 있다.
- 메모리상에서만 저장한 것이고, 파일을 수정한게 아니므로 새로고침하면 사라진다.
<예제1>
<!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_createElement.html</title>
</head>
<body>
<h1>문서 객체 동적으로 만들기</h1>
<input type="text" id="inputName" placeholder="이름 입력...">
<button id="addBtn">추가</button>
<ul>
<li>바나나</li>
<li>딸기</li>
<li>복숭아</li>
</ul>
<script>
/*
input 요소에 이름을 입력하고 추가 버튼을 누르면
입력한 이름이 ul에 추가되도록 프로그래밍 해 보세요.
-hint
let name=document.querySelector("#inputName").value;
let a=document.queryElement("li");
a.innerText="xxx";
document.querySelector("ul").append(a);
*/
//추가버튼을 눌렀을때 실행할 함수 등록
document.querySelector("#addBtn").addEventListener("click", function(){
//1. input 요소에 입력한 이름을 읽어온다.
let name=document.querySelector("#inputName").value;
//만일 입력하지 않았으면
if(name == ""){
alert("추가할 이름을 입력하세요!");
return; //함수를 여기서 끝내라
}
//2. li 요소를 동적으로 만든다.
let a=document.createElement("li");
//3. 만든 li요소의 innerText로 1.에서 읽어온 이름을 넣어주고
a.innerText=name;
//4. ul요소의 자식요소로 추가하기
document.querySelector("ul").append(a);
//5. 입력창 초기화
document.querySelector("#inputName").value=""; //value에 빈 문자열 넣어주기
});
document.querySelector("#inputName").addEventListener("keydown", function(e){
//만일 엔터키를 눌렀으면
if(e.keyCode==13){
//1. input 요소에 입력한 이름을 읽어온다.
let name=document.querySelector("#inputName").value;
//2. li 요소를 동적으로 만든다.
let a=document.createElement("li");
//3. 만든 li요소의 innerText로 1.에서 읽어온 이름을 넣어주고
a.innerText=name;
//4. ul요소의 자식요소로 추가하기
document.querySelector("ul").append(a);
//5. 입력창 초기화
document.querySelector("#inputName").value=""; //value에 빈 문자열 넣어주기
}
});
</script>
</body>
</html>- console 창에서 작성했던 내용을 페이지상의 input 요소를 사용해 사용자가 직접 리스트를 추가할 수 있도록 만들기
1. input 요소에 입력한 이름을 읽어온다.
2. li 요소를 동적으로 만든다.
3. 만든 li요소의 innerText로 1.에서 읽어온 이름을 넣어주고
4. ul요소의 자식요소로 추가하기
5. 입력창 초기화
→ 절차를 따라가며 코딩하는 연습!
위의 1과 5는 document.querySelector("#inputName").value; 를 똑같이 참조하고 있지만 다르다.
1. input 요소에 입력한 value를 변수 name 에 대입한다.(대입연산자의 우측)
5. " " 공백이 대입된다. (대입연산자의 좌측)
if(e.keyCode==13){ }
- input 요소에 값을 입력하고 엔터키 누르면 자동으로 등록되도록
'국비교육(22-23)' 카테고리의 다른 글
| 6일차(2)/javascript 기초 : 실습예제 (1) | 2022.10.13 |
|---|---|
| 6일차(1)/javascript 기초 : 동적 요소 만들기(2) (0) | 2022.10.13 |
| 5일차(4)/javascript 기초 : 연산자 operator (0) | 2022.10.12 |
| 5일차(3)/javascript 기초 : if, else 문(2) (0) | 2022.10.12 |
| 5일차(2)/javascript 기초 : if, else 문 (0) | 2022.10.12 |