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);
반복문
반복문의 용도
- 코드를 반복하고싶을 때
- 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');
}
});
'Front-End Developer > JavaScript' 카테고리의 다른 글
Promise/fetch 텍스트파일에 있는 텍스트는 어떻게 가져올건데? (2) | 2022.06.23 |
---|---|
JavaScript sort() not working | sort()가 안될 때 (0) | 2022.06.01 |
for 반복문으로 코드 n배 절약해보기 + 이벤트버블링 (0) | 2022.05.28 |
(JS기초)변수의 할당, 선언, 범위 (0) | 2022.05.22 |
event listener사용해서 로그인창 구현해보기 (1) | 2022.05.19 |