Kosta DevOps 과정 280기/Java
새로운 노드 생성하기
by 롯슈83
2024. 7. 11.
- innerHTML
- createElement()
<div id = "result"></div>
<script>
//1번방법 - 내용을 통쨰로 갈아 끼움
let str = "<h1>hello</h1>";
document.querySelector("result").innerHTML = str;
//2번방법 - 계속 노드를 추가할 수 있다.
let h1 = document.createElement("h1");
let txt = document.createTextNode("hello");
h1.appendChild(txt);
document.querySelector("#result").appendChild(h1);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
document.querySelector("#btnAdd").onclick=function(){
var data = document.querySelector("#data").value;
var str = "<li>"+data+"</li>";
document.querySelector("#list").innerHTML=str;
}
}
</script>
</head>
<body>
<h2>인생에서 중요하게 여기는것</h2>
<input type="text" id="data">
<button id="btnAdd">추가</button>
<hr>
<ul id="list">
<li>가족</li>
<li>돈</li>
<li>쉬는시간</li>
</ul>
</body>
</html>
- 예시 : 기존꺼에서 추가 - createElement 이용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
document.querySelector("#btnAdd").onclick=function(){
var data = document.querySelector("#data").value;
let li = document.createElement("li");
let txt = document.createTextNode(data);
li.appendChild(txt);
document.querySelector("#list").appendChild(li);
}
}
</script>
</head>
<body>
<h2>인생에서 중요하게 여기는것</h2>
<input type="text" id="data">
<button id="btnAdd">추가</button>
<hr>
<ul id="list">
<li>가족</li>
<li>돈</li>
<li>쉬는시간</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
$btnAdd = document.querySelector("#btnAdd");
$btnAdd.onclick = function(){
let inputs = document.querySelectorAll(".in-s");
tr = document.createElement("tr");
for(i = 0; i < inputs.length; i++){
td = document.createElement("td");
txt = document.createTextNode(inputs[i].value);
td.appendChild(txt);
tr.appendChild(td);
}
document.querySelector("#myTable tbody").appendChild(tr);
}
$trS = document.querySelectorAll("#myTable tbody tr");
for(let i = 0; i < $trS.length; i++){
$tr = $trS[i];
$tr.setAttribute("check", 0);
$tr.onmouseover = function(){
if(this.getAttribute("check") != 1){
this.style.background="pink";
}
console.log(1);
}
$tr.onmouseleave = function(){
if(this.getAttribute("check") != 1){
this.style.background=null;
}
console.log(2);
}
$tr.onclick = function(){
for(let j = 0 ; j<$trS.length; j++){
$trS[j].setAttribute("check", 0);
$trS[j].style.background=null;
}
this.setAttribute("check", 1);
this.style.background = "red";
console.log(3);
};
}
}
</script>
<style>
.table{
width:80%;
border:1px solid #ddd;
border-collapse: collapse;
border-spacing: 0;
}
.table tr:hover{
cursor: pointer;
}
.table thead th{
background: rgb(242, 242, 246);
}
.table th, .table td{
border:1px solid #ddd;
}
</style>
</head>
<body>
이름 : <input class="in-s" id="name" type="text"><br>
국어 : <input class="in-s" id="kor" type="text"><br>
영어 : <input class="in-s" id="eng" type="text"><br>
수학 : <input class="in-s" id="math" type="text"><br>
<button id = "btnAdd">추가</button>
<table class="table" id="myTable">
<thead>
<tr>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>100</td>
<td>70</td>
<td>60</td>
</tr>
<tr>
<td>이순신</td>
<td>80</td>
<td>80</td>
<td>100</td>
</tr>
<tr>
<td>유관순</td>
<td>90</td>
<td>90</td>
<td>80</td>
</tr>
<tr>
<td>김유신</td>
<td>70</td>
<td>70</td>
<td>90</td>
</tr>
<tr>
<td>강감찬</td>
<td>95</td>
<td>90</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
