자바스크립트로 HTML 요소 추가하기

📖 createElement()

• createElement() 메서드는 지정한 파라미터의 HTML 요소를 생성해 반환한다.
• 기본 문법 : document.createElement(사용할 태그명)

createElement() 예제

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

작성한 태그가 신규 생성된 것을 확인할 수 있다.

appendChild()

• 힌 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다.
• 쉽게 포현하자면 appendChil() 메서드를 사용한 요소 안에 자식 요소를 추가한다는 의미이다.
• 기본 문법 : 선택 요소.appendChild(자식요소)

const parent = document.querySelector('h1');
const child = document.createElement('h2');

parent.appendChild(child);

추가 전

추가 후

appndChild() 메서드 사용으로 인해 자식 요소가 추가된 것을 학인할 수 있다.

prepend()

appenChil()와 반대로 요소의 맨 앞에 위치하게 된다.

const parent = document.querySelector('h1');
const child = document.createElement('h2');

parent.prepend(child);

appenChild()와 달리 부모 요소의 앞에 위치하는 것을 확인할 수 있다.

참고
creatElement