바닐라 ★append 많이 쓰인다★
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
margin-top: 10px;
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");
//id, innerBox1 속성을 줬으니, 애는 이제 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>
//id 하나 추가 된 모습! id를 동적으로 만들어냄
setAttribute를 사용해 자바 스크립트로 동적으로 만들어내기
이 2개의 코드는 다르다. console 확인 ㄱㄱ
1. 자바 스크립트가 인식하는 DOM 객체
2. 그냥 문자열
setAttribute("class", "box");
이렇게 코드를 작성하면, 아까 봤던 '순수한 div'에 클래스가 붙을 것이다.
(콘솔창에서 봐야함)attribute (속성)은 바로 이런 걸 말한다. class, id 이런 것!
이렇게 작성하면 이 코드의 attribute가 2개 추가 될 것이다
-> 이런 것들을 자바 스크립트로 동적으로 만들어낼 수 있구나!객체의 상태 = 속성 (attribute)
html의 <div> 태그에 어떤 속성들이 있어?
이런 것들을 엘레멘트.클래스 이런 식으로 해서 찾을 수 있겠구나
이런 것들을 물어보면서.... vs 코드에서 공부해보자!
innerHTML / innerText
innerHTML은 HTML 코드 인식 O
innerText는 HTML 코드 인식 X -> 쓸 일 잘 없음
//innerHTML
//innerText → HTML 코드 인식 안 되고 TEXT로 인식 됐다!
val() (input 태그에 사용)
자바 스크립트로 하면 이런 풀코드가 필요하네… jQuery로 바꿔보자!
jQuery로 변경 하자
[ 추가하기 코드 ]
<script>
function addAppend() {
// let newEl = document.createElement("div");
// console.log(newEl);
// console.log("<div></div");
// newEl.setAttribute("class", "box");
// newEl.setAttribute("id", "innerBox1");
// newEl.innerHTML = "내부박스1";
// let el = document.querySelector("#outerBox");
// el.append(newEl);
let newString = `<div class="box" id="innerBox">내부박스</div>`;
$("#outerBox").append(newString);
}[ jQuery로 바꿨을 때, 실행 화면 ]
[ 이렇게 사용하면 좋은 점 ]
디자인을 자바 스크립트 function에 넣어놓고 땡겨쓸 수 있음! -> 재사용 가능!그러나!! id가 중복되는 문제 발생!
그러나!! id가 유일하지 않은 문제가 있다. id가 유일하지 않으면 삭제하고 싶은 특정한 엘리먼트를 찾을 수가 없어서 삭제를 못함
<script>
let n = 1;
function addAppend() {
let newString = `<div class="box" id="innerBox1${n}">내부박스${n}</div>`;
n++;
$("#outerBox").append(newString);
}
id 값이 다 다르게 나오는 것 확인! → 바꿔보자! → DOM 삭제하기 (전역변수 이용)
id는 유일해야한다!
Share article
