개발_TIL | 2022-08-02 (73)

이슈리포트 - Javascript HTML 작성하기

---

📌 원리 생각해보기!

---

• 먼저 추가 하고 싶은 HTML에 대해서 생각해보자.
• 위와 같은 사진을 예시로 든다면, 답글이라는 큰 div 태그 내부에 hidden edit box라는 div 태그를 생성하고 싶다!
• 그렇다면 답글 div에 숨겨진 수정 div를 만들기 위해서는,
  1. hidden edit box div를 만든다
  2. hidden edit box div에 들어갈 속성을 작성한다
  3. hidden edit box div를 답글 div 안에 쏙 넣는다!

📌 document.createElement로 HTML 엘리먼트 생성하기

---

• HTML 태그로 넣기 위해서는 똑같은 HTML 태그를 생성해줄 필요가 있다!
• document.createElement 메서드는 자바스크립트 내부에서 html 엘리먼트를 생성하여 다룰 수 있도록 빈 자료형을 만들어준다
• document.createElement(”HTML 태그”) 형식으로 적어 원하는 엘리먼트를 생성할 수 있다

const hidden_edit_box = document.createElement("div");

📌 document.setAttribue 적용하기

---

• 빈 HTML 엘리먼트 자료형을 생성했다면, 이제 원하는 속성을 HTML처럼 작성해줄 수 있다
  • 기존 HTML에서 사용하던 CSS, JS 의 여러 함수와 스타일을 똑같이 적용할 수 있다
• document.setAttribute 메서드는 HTML 엘리먼트의 속성(어트리뷰트)을 적용할 수 있는 메서드다.
• document.setAttribute(”속성”, “값”) 의 형태로 작성한다