DOM 추가 전체 코드
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>추가하기</h1>
<button onclick="addAppend()">append로 추가하기</button>
<button onclick="addPrepend()">prepend로 추가하기</button>
<button onclick="addBefore()">before로 추가하기</button>
<button onclick="addAfter()">after로 추가하기</button>
<div class="box" id="outerBox">
</div>
<script>
function addAppend() { // 내부 박스 밑으로 들어온다.
let newEl = document.createElement("div");
newEl.setAttribute("class", "box");
newEl.setAttribute("id", "innerBox1");
newEl.innerHTML = "내부박스1";
let el = document.querySelector("#outerBox");
el.append(newEl);
}
function addPrepend() { // 내부 박스 위로 올라온다.
let newEl = document.createElement("div");
newEl.setAttribute("class", "box");
newEl.setAttribute("id", "innerBox2");
newEl.innerHTML = "내부박스2";
let el = document.querySelector("#outerBox");
el.prepend(newEl);
}
function addBefore() { // 박스 외부 위로 붙인다.
let newEl = document.createElement("div");
newEl.setAttribute("class", "box");
newEl.setAttribute("id", "innerBox3");
newEl.innerHTML = "내부박스3";
let el = document.querySelector("#outerBox");
el.before(newEl);
}
function addAfter() { // 박스 외부 밑으로 붙인다.
let newEl = document.createElement("div");
newEl.setAttribute("class", "box");
newEl.setAttribute("id", "innerBox4");
newEl.innerHTML = "내부박스4";
let el = document.querySelector("#outerBox");
el.after(newEl);
}
</script>
</body>
</html>
JavaScript
복사
JavaScript로 구현하기
.append( )로 추가하기
function addAppend() { // 내부 박스 밑으로 들어온다.
let newEl = document.createElement("div");
newEl.setAttribute("class", "box");
newEl.setAttribute("id", "innerBox1");
newEl.innerHTML = "내부박스1";
let el = document.querySelector("#outerBox");
el.append(newEl);
}
JavaScript
복사
.prepend( )로 추가하기
.before( )로 추가하기
.after() 로 추가하기
document.createElement()의 기능
document.createElement() 함수는 JavaScript에서 새로운 HTML 요소를 생성하는 데 사용된다. 이 함수는 document 객체의 메서드로, 문자열 인자로 전달된 태그 이름에 해당하는 새로운 HTML 요소를 생성한다. 생성된 요소는 문서에 삽입되기 전까지는 DOM에 나타나지 않는다.
document.createElement()로 자바스크립트가 인식하는 텍스트로 넣을 수 있다.function addAppend() {
let newEl = document.createElement("div");
console.log(newEl); // 자바스크립트가 인식하는 텍스트
console.log("<div></div>") // 자바스크립트가 인식못하는 일반 텍스트
}
JavaScript
복사
id값을 동적으로 만들어야된다. → 백틱 활용 ( ` ) 홑따옴표 아님!!
내부에 ${} 표시로 동적으로 변수에 값을 넣을 수 있다.
onclick 설정으로 문자를 버튼에 고정해서 기능을 구현할 수 있다.
AJAX로 DB를 먼저 처리하여서 , 서버 응답코드 200을 받고 로직을 구현한다.
AJAX로 통신하면 부분 리로딩을 할 수 있다. <script>
let n = 0;
function addAppend() {
n++;
let newString = `<div onclick = "del(${n})"" class="box" id ="innerBox${n}">내부박스${n}</div>`;
$("#outerBox").append(newString);
}
function del(n) {
$(`innerBox${n}`).remove();
}
</script>
JavaScript
복사
클라이언트 사이드 렌더링(CSR)을 하면 부분 리로딩을 할 수 있다.
서버 쪽에서 자바스크립트 요청을 허용해줘야 된다.
AJAX란???
card는 유효아이디가 있어야 된다.
리액트에서는 배열 데이터를 다룬다.
삭제할려면 Id가 필요하다.
토글 알고리즘으로 하트 색 바꾸기
클라이언트 사이드 렌더링을 하기 위해서 쓰는 로
<script>
let check = -1;
function loveToggle(e) {
console.log(e.target);
if (check == -1) {
$(e.target).addClass("my-love");
} else {
$(e.target).removeClass("my-love");
}
check = check * -1;
}
</script>
JavaScript
복사
.target
event를 찾아서