javascript로 html 생성하기(createElement, insertAdjacentHTML)

See the Pen Untitled by breeghty (@breeghty) on CodePen.

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

 

insertAdjacentHTML은 (position, text)으로 이뤄진다. position은 beforebegin, afterbegin, beforeend, afterend만 사용가능하다. 예시는 아래를 참고.

Element.insertAdjacentHTML() - Web API | MDN

 

예제:  셔츠옵션을 선택하면 95, 100 사이즈가 나타나고, 바지 옵션을 선택하면 28, 30 사이즈가 나타나는 선택박스를 만들어보자.

 

 

 

See the Pen Untitled by breeghty (@breeghty) on CodePen.

 

+ array forEach 문으로 데이터 넣기

 

var pants = [28, 30, 32, 34];

pants.forEach(function(data){
    var optTag = `<option>${data}</option>`;
    sizeValue.insertAdjacentHTML('beforeend',optTag);
});

array.forEach(function(data,index){
	//data는 array의 데이터 값, index은 인덱스를 나타낸다.
}

 

See the Pen Untitled by breeghty (@breeghty) on CodePen.