[자바스크립트] html생성하기, forEach, for in 반복문

var a=document.createElement('p');
a.innerHTML='ddd';
document.querySelector('#test').appendChild(a);
/*---------------------------------------*/
var 템플릿 = '<p>안녕</p>'
document.querySelector('#test').insertAdjacentHTML('beforeend', 템플릿);

$('#test').append(템플릿);

document.createElement 메소드를 이용해서 html을 생성,

appendChild 메소드를 이용해서 생성한 html을 원하는 요소 안에 넣을 수 있다.

 

이 방법 말고도,

변수에 html내용을 문자열로 작성해놓은 다음,

.html 혹은 .append등의 메소드를 이용하여 해당 변수 내용을 넣어도 똑같이 동작한다.

 

전자의 경우가 속도가 2배정도 더 빠르다고 하나, 현재 발전된 컴퓨터로는 두 방법의 속도 차이가 미미하기때문에

편한 방법으로 사용해도 될 것 같다.

 

이 html생성 방법을 이용해서,

select form에서 

셔츠 선택시 -> 95, 90 사이즈 선택 select form이 나타나고

바지 선택시 -> 28, 30 사이즈 선택 select form이 나타나게 만들어 보자.

var 바지옵션 = '<option>28</option><option>30</option>';
var 셔츠옵션 = '<option>95</option><option>100</option>';
$('.form-select').eq(0).on('input', function () {
    if ($(this).val() == '바지') {
        $('.form-select').eq(1).html(바지옵션);
        $('.form-select').eq(1).removeClass('unshow');
    } else if ($(this).val() == '셔츠') {
        $('.form-select').eq(1).html(셔츠옵션);
        $('.form-select').eq(1).removeClass('unshow');
    } else {
        $('.form-select').eq(1).addClass('unshow');
    }
})

---

var pants = [28,30,32];
var shirts = [95,100,105];

var obj={name:'kkk',age:20};

 

만약 서버에서 사이즈 자료를 가져왔는데,

이런 변수에 담겨있으면 어떻게 써야 할까?

 

        for(var i=0;i<pants.length;i++){
            $('.form-select').eq(1).append(`<option>${pants[i]}</option>`)
        }

for 반복문을 쓸 수 있다

 

        pants.forEach(function(a,i){
            $('.form-select').append(`<option>${i}::${a}</option>`)
        });
        
		pants.forEach((a,i) => {
            $('.form-select').append(`<option>${i}::${a}</option>`)
        });

또는 forEach반복문을 쓸 수 있다.

 

forEach(콜백함수) 형태로 쓸 수 있는데,

forEach(function(a,i){})의 형태로 쓰게되면

콜백함수의 맨 앞 인자 a는, pants의 각 요소값이 되고

i는 반복마다 1씩 증가하는 값이 된다.

 

콜백함수 자리에 (a) => {} 형태로 쓴 것은 arrow function인데,

arrow function 내부에서 this를 쓰게되면, 함수 바깥에 있던 this를 그대로 쓴다는 차이점이 있다.

 

var obj={name:'kkk',age:20};
for(var key in obj){
    
}

Object자료형은 for in 반복문을 사용하면 된다.

위 예시에서 key는 obj의 키값이 된다.