DOM - 2

이미 존재하는 html의 요소를 조회할 수 있다면

요소의 속성을 변경하여 조회한 html의 요소를 update해줄 수 있다.

또한 remove메서드를 이용하여 선택한 요소를 지워버릴 수 도 있다.

그럼 만드는것은...?

생성

document.createElement를 사용할 수 있다.

let newElement = document.createElement('태그') // <태그></태그> 가 만들어진다.

newElement.textContent = '내용'
console.log(newElement) // <태그>내용</태그>

하지만 화면엔 아무것도 추가되지 않았다.

우리가 만든 요소를 html에 추가해 줘야 한다.

HTML에 추가

우선 추가될 기준점을 고른 후 기준점의 자식으로 추가 해주면

페이지에 정상적으로 렌더링되는것을 확인할 수 있다.

let target = document.querySelector('#comments-box')
// 자식 요소로 추가하는 메서드는
// appendChild 와 prepend 가 있다.

// appendChild는 뒤에 prepend는 앞에 추가한다. (prepend만 새치기를 한다.)

target.appendChild(newElement)

참고한 레퍼런스