[자바스크립트] createElement() , setAttribute() 동적요소 및 요소 속성 설정 하는방법

document.createElement() 이란?

---

document.createElement() 메소드는 지정한 tagName의 HTML 요소를 만들어 반환합니다.

createElement를 통해 페이지 로딩시점에는 없었던 요소를 원하는 시점에 동적으로 만들어서 삽입 할 수 있습니다.

삽입은 .append()를 통해서 합니다.

let element = document.createElement(tagName [options]);

tagName: 생성할 요소의 유형을 가리키는 문자열

option: is속성을 가진 ElementCreationOptions 객체

 

활용 예시

let div = document.createElement("p");

이러면 html에 없던 p 태그가 로딩 시점에 동적으로 나오는 현상을 확인이 가능합니다.

 

그럼 p 태그 안에 name, id 등 속성을 줄수 없을까?

 

setAttribute() 이란?

---

Element.setAttribute() 메서드는 지정된 요소의 속성 값을 설정한다.

속성이 이미 있는 경우엔느 값이 업데이트 된다.

 

속성의 현재 값을 얻으려면 getAttribute()룰, 속성을 제거 하려면 removeAttribute()를 호출한다.

Element.setAttribute(name,value);

 

반환값: undefined

 

예외

InvalidCharacterError DOMException : 지정된 속성 name에 속성 이름이 유효하지 않은 문자가 포함되어 있을 때 나오는 오류

 

활용 예시

//만든 요소에 src 속성 추가하기
imgs.setAttribute("src","images/kim1.png");
//만든 요소에 alt 속성 추가하기
imgs.setAttribute("alt","김구라 이미지");