노드생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "content">
</div>
<div id = "inner">
</div>
<ul id="wrap">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button type = "button" id = "btn1">버튼1</button>
<button type = "button" id = "btn2">버튼2</button>
<button type = "button" id = "btn3">버튼3</button>
<script>
var btn1 = document.getElementById("btn1");
var content = document.getElementById("content");
var lis = document.querySelectorAll("#wrap > li");
btn1.onclick = function(){
content.innerHTML += "<input type='checkbox' name='inter'> 체크박스생성";
var x = content.innerHTML;
console.log(x);
for(var i = 0 ; i < lis.length ; i++){
console.log(lis[i]);
}
}
</script>
</body>
</html>
버튼1을 누르면
체크박스가 하나씩 생성된다.
노드를 특정위치에 추가하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type = "text" class = "todo" placeholder="할일">
<button type = "button" id="btn"> 추가하기</button>
<ul class="list">
</ul>
<script>
var btn = document.getElementById("btn");
var todo = document.querySelector(".todo");
var list = document.querySelector(".list");
index = 1;
btn.onclick = function() {
var value = index++ + ". " + todo.value; //사용자가 입력한 값
//li태그 생성
var li = document.createElement("li");
var a = document.createElement("a");
a.href = "https://www.google.com"; //a href속성에 접근
var text = document.createTextNode(value); //문자열을 node타입으로 변환해줌
//태그.appendChild(자식에 요소 추가)
a.appendChild(text);
li.appendChild(a);
list.appendChild(li);
todo.value="";//사용자가 입력한 input초기화
}
</script>
<hr>
<ul class = "example">
<!-- 여기에 10개 한번에 넣어봄-->
</ul>
<button type = "button" id="btn2">10개 생성하기</button>
<script>
var example = document.querySelector(".example")
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
var value = todo.value ; //사용자 입력값
//한번에 10개를 생성한다
for( var i = 1 ; i <= 10 ; i++){
var li = document.createElement("li"); // li생성
li.innerHTML = "<a href='https://www.google.com'>" +value + "</a>";
example.appendChild(li);
}
}
</script>
</body>
</html>
추가를 누르면 ul 태그 아래(자식)에 추가된다.
--appendchild
실습
위의 형태로 만들어보기
실습코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-spacing: 0;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
tr {
height: 30px;
}
#head {
color: blueviolet;
}
</style>
</head>
<body>
<button type="button" id="btn">5개 추가히기</button>
<button type="button" id="btn2">1개 추가히기</button>
<table id=table>
<tr id=head>
<td>교시</td>
<td>훈련과목</td>
<td>담당자</td>
<td>훈련내용</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var table = document.getElementById("table");
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
btn.onclick = function () {
for (var i = 1; i <= 5; i++) {
var tr = document.createElement("tr");
for (var j = 1; j <= 4; j++) {
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
}
btn2.onclick = function () {
var tr = document.createElement("tr");
for (var j = 1; j <= 4; j++) {
var td = document.createElement("td");
tr.appendChild(td);
}
table.appendChild(tr);
}
</script>
</body>
</html>'JS > JS-event' 카테고리의 다른 글
| 노드 삭제 (1) | 2024.02.05 |
|---|---|
| BOM - timeout (0) | 2024.02.05 |
| BOM -인터벌예제 (0) | 2024.02.05 |
| BOM (인터벌) (0) | 2024.02.05 |
| JS 실습 - 버튼으로 css style 속성 변경하기 (0) | 2024.01.29 |
