JS로 생성한 요소 for문으로 HTML에 붙여주기

HTML생성하는법

 

.createElement()

 

먼저 태그를 생성해주고, 태그 안에 내용물을 넣어준다.

insertAdjacent보다 빠른데 별차이없다

let a = document.createElement('p');
a.textContent = '안녕';

document.querySelector('#test').appendChild(a);

 

 

.insertAdjacentHTML() / .append()

 

HTML작성하듯이 똑같이 작성하고 HTML의 지정한 요소 근처에 붙여준다.

let template = '<p class="red">hello</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', template);

---

반복문

반복문의 용도

1. 코드를 반복하고싶을 때
2. array, object데이터를 전부 꺼내고싶을 때

 

forEach

배열에 쓸 수 있는 반복문. 요소개수만큼 반복해줌

배열의 요소 각각에 함수를 걸어준다

콜백함수랑 같이써야함

보통 인자이름은 item이나 data많이씀

let size = document.querySelector('.hide');
let pants = [28, 30, 32, 34, 36, 38];

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

 

for(in)

object에 쓸 수 있는 반복문

let obj = {name: 'jihyun', age: 20}

for(let key in obj){
	console.log(key);
}

//name, age

let obj = {name: 'jihyun', age: 20}

for(let key in obj){
	console.log(obj[key]);
}
//jihyun, 20 

 

 

예제

let pants = [28, 30, 32, 34, 36, 38];
let shirt = [90, 95, 100, 105];

value.addEventListener('input', function (e) {

  if (e.currentTarget.value == '셔츠') {
    size.classList.remove('hide');
    size.innerHTML = '';

	//shirt배열에 forEach문으로 요소개수만큼 option생성
    shirt.forEach((item) => {
      size.insertAdjacentHTML('afterBegin', `<option>${item}</option>`);
    });
  } else if (e.currentTarget.value == '바지') {
    size.classList.remove('hide');
    size.innerHTML = '';

	//pants배열에 forEach문으로 요소개수만큼 option생성
    pants.forEach((data) => {
      size.insertAdjacentHTML('beforeend', `<option>${data}</option>`);
    });
  } else {
    size.classList.add('hide');
  }
});

바지옵션을 선택하면 pants 안의 요소들이 하나씩 출력된다.

 

셔츠옵션을 선택하면 shirt안의 요소들이 하나씩 출력된다.