바닐라 ★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
