-
[웹 프로그래밍] DOM공부 2023. 6. 1. 16:44
메소드 설명 document.createElement(element) HTML 요소를 생성한다. document.removeChild(element) HTML 요소를 삭제한다. document.appendChild(element)
dom_append.html
<!DOCTYPE html> <html lang="ko"> <head> <script> let cnt=0; function addtext(t) { let node = document.createElement("p"); node.innerHTML = t + " ====> " + ++cnt; // document.getElementById("target").appendChild(node); let tar = document.getElementById("target"); tar.insertBefore(node, tar.firstChild); } </script> </head> <body> <div id="target" onclick="addtext('동적으로 텍스트가 추가됩니다.')" style="font: 20px italic;">여기를 클릭하세요.</div> </body> </html>
dom_remove
<!DOCTYPE html> // 끝에서 2번째 삭제하기 <html> <head> <script> function removeNode() { var parent = document.getElementById("target"); //var child = document.getElementById("p1"); var child = document.querySelectorAll("#target>p"); parent.removeChild(child[child.length-2]); } </script> </head> <body> <div id="target"> <p id="p1">첫번째 단락</p> <p id="p2">두번째 단락</p> <p>3번째 단락</p> <p>4번째 단락</p> <p>5번째 단락</p> <p>6번째 단락</p> </div> <button onclick="removeNode()">누르세요!</button> </body> </html><!DOCTYPE html> // 버튼으로 생성과 삭제 <html> <head> <style> #target { width: 700px; border: solid 2px blue; } #target>p { width: 130px; border: solid 2px red; display: inline-block; margin: 5px; } </style> <script> function appendNode() { let node = document.createElement("p"); let p = document.querySelectorAll("#target>p"); node.innerHTML = p.length + " 번째 태그"; document.getElementById("target").appendChild(node); } function removeNode() { let parent = document.getElementById("target"); let p = document.querySelectorAll("#target>p"); if (p.length <= 0) { alert("삭제할 p태그 없음") return; }; parent.removeChild(p[p.length - 1]); } </script> </head> <body> <div id="target"> </div> <button onclick="appendNode()">P태그 생성</button> <button onclick="removeNode()">P태그 삭제</button> </body> </html>
insert_row.html
<!DOCTYPE html> <html> <head> <style> table, td { border: 1px solid black; } </style> </head> <body> <table id="special"> <tr> <td>(1, 1) 셀</td> <td>(1, 2) 셀</td> </tr> <tr> <td>(2, 1) 셀</td> <td>(2, 2) 셀</td> </tr> </table> <br> <button onclick="insert()">행 추가</button> <script> function insert() { let table = document.getElementById("special"); let tr = document.querySelectorAll("#special tr") let row = table.insertRow(tr.length-2); // 숫자가 바뀌면 삽입되는 곳도 바뀐다. let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); cell1.innerHTML = "새로운 셀 (1, 1)"; cell2.innerHTML = "새로운 셀 (1, 2)"; } </script> </body> </html>
회원가입 창 만들기
<!DOCTYPE html> <html lang="ko"> <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 { width: 300px; height: 200px; border: solid 0px black; margin: 30px auto; } #on1 { width: 100%; height: 60%; border: solid 0px blue; margin-bottom: 2px; text-align: center; } #on2, #on3 { width: 100%; height: 30%; text-align: center; } #on3{ color: red; font-weight: bold; } #on1 input{ font-size: 22px; width: 90%; margin-top: 10px; } #btn{ font-size: 22px; width: 90%; background-color: green; color: white; } </style> <script> function check() { let id=document.getElementById("id").value; let pa=document.getElementById("pa").value; let on3=document.getElementById("on3"); if(id.length < 5) { // 아이디 길이 체크 on3.innerHTML="5자리 이상..." return false; } if(!isNaN(id[0])) { // 아이디 시작 문자 여부 체크 on3.innerHTML="문자로 시작..." return false; } if(pa.length < 5 || pcheck(pa) < 1) { // 암호 길이 및 대문자 on3.innerHTML="암호 길이가 4보다 작거나 대문자가 포함되어있지 않음"; return false; } if(id=="sga22" && pa=="123GG") { let on1=document.getElementById("on1"); let btn=document.getElementById("btn"); on1.innerHTML="<h2>" + id + "님 환영합니다"; on3.innerHTML=""; btn.innerHTML="Logout"; btn.onclick=function() { location.href="logon.html" } } else { alert("아이디 또는 암호 오류~~"); return false; } } function pcheck(pa) { let cnt = 0; for(let i=0; i < pa.length; i++) { if(pa[i] >= "A" && pa[i] <= "Z") cnt++; } return cnt; } </script> </head> <body> <div id="box"> <div id="on1"> <input id="id" type="text" placeholder="아이디"/> <input id="pa" type="password" placeholder="비밀번호"/> </div> <div id="on2"> <button id="btn" onclick="check()">Logon</button> </div> <div id="on3"> </div> </div> </body> </html>'공부' 카테고리의 다른 글
[JSP] CheckBox (0) 2023.09.12 [JSP] Login (0) 2023.09.12 [자바프로그래밍] 인터페이스, 람다식, 패키지 // 미작성 (0) 2023.06.09 [자바프로그래밍] 이벤트 처리 (0) 2023.06.02 [자바프로그래밍] 그래픽 사용자 인터페이스 (0) 2023.06.02