반응형
아래와 같은 형식의 방명록을 만들어보자.
| 작성자 | |
| 비밀번호 | |
| 글내용 |
| 작성 |
| 글 ... | |
| 수정 | 삭제 |
<head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#t1, div{
border: 1px solid black;
}
</style>
<script>
let cnt = 1;
function a(){
let writer = f.writer.value;
let pwd = f.pwd.value;
let content = f.content.value;
let el = mkDiv(writer, pwd, content);
let list = document.getElementById("list");
list.appendChild(el);
}
function mkDiv(writer, pwd, content){
let newDiv = document.createElement("div");
newDiv.id = "d_" + cnt++;
let html = "";
html += "writer:"+writer+"<br/>";
html += "content:"+content+"<br/>";
html += "<input type = 'button' value = '수정'>";
html += "<input type = 'button' value = '삭제'>";
newDiv.innerHTML = html;
return newDiv;
}
</script>
</head>| 1 | <style> #t1, div{ border: 1px solid black; } </style> |
t1과 div에 style 넣기 |
| 2 | <script> let cnt = 1; |
cnt 1로 선언 |
| 3 | function a(){ let writer = f.writer.value; let pwd = f.pwd.value; let content = f.content.value; |
변수에 html에서 받아온 값을 담음. |
| 4 | let el = mkDiv(writer, pwd, content); | (3)의 변수를 mkDiv 파라메터에 받음 (6) 으로 이동 (mkDiv 함수) * mkDiv = newDiv = el |
| 5 | let list = document.getElementById("list"); list.appendChild(el); } |
id 가 list 인 div 를 불러옴 list의 자식으로 el(newDiv) 추가 |
| 6 | function mkDiv(writer, pwd, content){ let newDiv = document.createElement("div"); |
함수 mkDiv 새 div 태그 생성 |
| 7 | newDiv.id = "d_" + cnt++; | div에 id를 지정. d_1, d_2....와 같은 형식으로 id가 생성된다 |
| 8 | let html = ""; html += "writer:"+writer+"<br/>"; html += "content:"+content+"<br/>"; html += "<input type = 'button' value = '수정'>"; html += "<input type = 'button' value = '삭제'>"; |
html 선언 (생성될 div에 출력될 내용을 작성한 변수) html 에 값 넣음 |
| 9 | newDiv.innerHTML = html; return newDiv; } |
위의 html 변수에 넣은 내용을 전부 받아옴 innerHTML : 태그와 태그 사이의 내용 읽기 받아온 내용 return -> newDiv 에 넣어줌 |
| 10 | (5)로 이동 |
<body>
<body>
<h3>방명록</h3>
<form name = "f">
<table id = "t1">
<tr><th> 작성자</th><td><input type = "text" name = "writer" id = "writer"></td></tr>
<tr><th> 글 비밀번호</th><td><input type = "password" name = "pwd" id = "pwd"></td></tr>
<tr><th> 내용</th><td><input type = "text" name = "content" id = "content"></td></tr>
<tr><th> 작성</th><td><input type = "button" name = "작성" value = "작성" onclick="a()"></td></tr>
</table>
</form>
<div id = "list">
<!-- id 가 list 인 div 에 받아온 값들을 계속 넣는 것. -->
<!-- 우리가 코드를 치는 것과 동일하게 계속 내용이 들어가고 있다. -->
</div>
</body>반응형
