라라리라
2023.09.08 / Step 4 [DOM_태그생성] - 코딩 48 일차 본문
_0401_추가_appendChild.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>
</head>
<body>
<!--
[개념] appendChild vs append
(1) 공통점 : 부모 태그에 자식 태그를 추가하는 메서드
(2) 차이점
* append
한번에 여러 자식 태그를 추가할 수 있고,
문자열도 추가할 수 있다.
-->
<h4>과일 목록</h4>
<div id="list">
</div>
<div id="text"></div>
<script>
let parent = document.querySelector("#list");
let ul = document.createElement("ul");
parent.appendChild(ul);
let li1 = document.createElement("li");
li1.innerText = "사과";
ul.appendChild(li1);
let li2 = document.createElement("li");
li2.innerText = "바나나";
ul.appendChild(li2);
let li3 = document.createElement("li");
li3.innerText = "딸기";
ul.appendChild(li3);
//---------------------------------------------
let text = document.querySelector("#text");
// 오류 발생
// text.appendChild("안녕하세요");
let textNode = document.createTextNode("안녕하세요");
text.appendChild(textNode);
</script>
</body>
</html>
과일 목록
_0402_추가_append.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>
</head>
<body>
<h4>과일 목록</h4>
<div id="list">
</div>
<div id="text"></div>
<script>
let parent = document.querySelector("#list");
let ul = document.createElement("ul");
parent.append(ul);
let li1 = document.createElement("li");
li1.innerText = "사과";
let li2 = document.createElement("li");
li2.innerText = "바나나";
let li3 = document.createElement("li");
li3.innerText = "딸기";
ul.append(li1, li2, li3);
//---------------------------------------------
let text = document.querySelector("#text");
text.append("안녕하세요");
</script>
</body>
</html>
과일 목록
_0403_추가_append.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>
</head>
<body>
<h4>학생 명단</h4>
<div id="list"></div>
<script>
let stList = [
{"name":"Hong", "age":21},
{"name":"Kim", "age":22},
{"name":"Park", "age":23}
];
for(let i=0; i<stList.length; i++) {
let p = document.createElement("p");
p.append(`이름 : ${stList[i].name}, 나이 : ${stList[i].age}`);
list.append(p);
}
</script>
</body>
</html>
학생 명단
_0404_삭제_removeChild.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>
</head>
<body>
<!--
[개념] remove vs removeChild
(1) remove : 요소를 삭제
(2) removeChild : 부모에게서 자식 객체를 떼어내기(=삭제)
-->
<div id="target">
<p id="p1">첫번째 단락</p>
<p id="p2">두번째 단락</p>
</div>
<button onclick="removeFunction()">remove()</button>
<button onclick="removeChildFunction()">removeChild()</button>
<script>
function removeFunction() {
target.remove();
}
function removeChildFunction() {
let delNode = target.removeChild(p1);
console.log(delNode);
}
</script>
</body>
</html>
첫번째 단락
두번째 단락
_0405_자식선택_children.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>
</head>
<body>
<h4>과일 목록</h4>
<div id="listerrr">
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
<li>포도</li>
</div>
<script>
for(let i=0; i<4; i++) {
console.log(listerrr.children[i].innerText);
}
</script>
</body>
</html>
과일 목록
_0406_종합.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>
.replyList{
border: 1px solid black;
width: 500px;
}
.removeList{
cursor: pointer;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
댓글 <input id="reply" type="text">
<button onclick="addReply()">등록</button>
</td>
</tr>
</table>
<table id="list">
</table>
<script>
function addReply() {
let value = document.querySelector("#reply").value; //텍스트창의 값;
if(value == "") { //텍스창의 값이 0이면 경고창을 띄움
alert("댓글을 입력해주세요.");
return; //리턴을 안쓰면 빈 댓글창이 생성됨
}
let tr = document.createElement("tr"); //tr요소를 생성한다.
// 답글 추가하기
let td = document.createElement("td"); //td요소를 생성한다.
td.setAttribute("class", "replyList"); //요소(td)의 class를 replylist로 지정
// td.classList = "replyList";
td.innerText = value; //td안의 내용 = value값
tr.append(td); //td는 tr의 자식선언
// 삭제 버튼 추가하기
td = document.createElement("td");
let delSpan = document.createElement("span");
delSpan.innerText = "X";
delSpan.setAttribute("class", "removeList");
delSpan.addEventListener("click", delReply)
td.append(delSpan);
tr.append(td);
list.append(tr);
document.querySelector("#reply").value = "";
document.querySelector("#reply").focus();
}
function delReply() {
let removeList = document.querySelectorAll(".removeList");
for(let i=0; i<removeList.length; i++) {
if(this == removeList[i]) {
list.children[i].remove();
}
}
}
</script>
</body>
</html>
| 댓글 |
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.09.12 / Step 5 [DOM_비동기] - 코딩 50 일차 (0) | 2023.09.12 |
|---|---|
| 2023.09.11 / Step 4 [DOM_태그생성] - 코딩 49 일차 (0) | 2023.09.11 |
| 2023.09.07 / Step 3 [DOM_이벤트] - 코딩 47 일차 (0) | 2023.09.07 |
| 2023.09.06 / Step 3 [DOM_이벤트] - 코딩 46 일차 (0) | 2023.09.06 |
| 2023.09.05 / Step 3 [DOM_이벤트] - 코딩 45 일차 (0) | 2023.09.05 |