[JS] createElement 와 appendChild + 속성 꿀팁

노드 추가

createElement는 요소를 만드는 메서드이고

appendChild는 요소를 연결해주는 메서드이다.

아래 예시 통해 보자

img 태그를 html에 추가하고 싶다면 다음과 같다.

const image = document.createElement("img");
document.body.appendChild(image);

하지만 img엔 src와 alt 등의 값이 필요한데 이는 원래 다음과 같지만

const imgSrc = document.createAttribute("src");
imgSrc.value = `./~` ;

더 간단한 방법이 있다.

imgSrc.src = `이미지 주소`;

같은 방식으로 가능하다.

그리고 div 나 p 태그 같은 경우는 text 내용이 필요한데 이는

const a = document.creatTextNode("텍스트");
노드.appendChild(a);

로 추가할 수 있다.