[J.S_DOM] 6. 요소 생성/ 추가/ 삭제 하기

 

6.0 요소 란?

시작하기 앞서 요소에 대해서 다시 알아보도록 하자 

6.0.1 요소(Element)의 뜻

HTML에서 요소는 웹페이지를 구성하는 하나하나의 조각을 뜻함

<p>안녕하세요!</p>

<p></p> : p태그 : 단락(paragraph)을 나타내는 요소

안녕하세요 : 요소의 내용(content)

위의 예제 전체가 하나의 HTML 요소

6.0.2 요소의 구조

HTML 요소는 대부분 시작태그(<>)+ 내용 + 끝 태그(</>)로 구성

   <!-- 요소의 구조 -->

    <tagname> 내용 </tagname>

    <!-- 예시 -->

    <h1>제목 입니다. </h1>

 

<h1> : h1 시작 태그

제목 입니다. : 요소 내용

</h1> : h1 끝 태그

💡 비유로 이해해 보면…
HTML 요소는 레고 블록 같다. 여러 개의 요소(블록)를 쌓아서 웹페이지(건물)를 지을 수 있다.
자바스크립트를 배우면 이 레고 블록을:
🛠 만들 수도 있고 ➕ 더할 수도 있고 🧹 없앨 수도 있다.

6.1 요소 생성 하기

HTML 문서가 처음 로딩 시 정적인 요소만 화면에 나타남

자바스크립트를 사용하면 필요시점에 새로운 요소를 만들어 낼 수 있음

 

✅ 어떻게 만들까?

document.createElement() 요소 생성 전용 함수

 

형식: 

const 새요소 = document.createElement("태그이름");

 

예:

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

새로운 <div> 요소를 하나 생성 후 변수에 담아두기
화면에 안나타남
생성만 된 상태
화면에 보이게 하려면 6.2 추가하기 내용 확인

6.2 요소 추가 하기

요소 생성후 화면(DOM) 에 삽입 후에 출력이 됨

이것을 요소 추가 하기 라고 함

 

요소를 추가 할 수 있는 방법 :

• appendChild
  • 새로 만든 요소를 어떤 부모 요소의 맨 마지막 자식으로 추가
• prepend(), insertBefore()
  • prepend() : 부모 요소의 맨 앞에 넣기
  • insertBefore() : 특정 자식 앞에 넣기

6.3 요소 삭제 하기

요소를 생성 했으면 요소도 삭제가 가능 

 

요소를 삭제 하는 방법 :

• element.remove() : 자기 자신을 DOM 에서 삭제. 가장 직관적이고 간단
• parent.removeChild(자식요소) : 부모요소에서 특정 자식 요소를 제거. 오래된 브라우저를 지원 시 이 방식이 종종 사용 됨.