자바스크립트에서 html 요소 생성하기 2탄 - for loop (반복문)

✅ JavaScript 에서 html 요소 생성하기

 input 체크박스를 html 코드가 아닌 자바스크립트에서 넣어보려고 한다  

function newCheck() {
    const leftBox = document.getElementsByClassName('article-detail')[0];
    const newDiv = document.createElement('div');
    leftBox.appendChild(newDiv);

    const input = document.createElement('input');
    input.type = 'checkbox';
    input.id = 'checkbox2';
    newDiv.appendChild(input);

    const label = document.createElement('label');
    label.innerHTML = ' Mayonnaise';
    label.htmlFor = 'checkbox2';
    newDiv.appendChild(label);
}

newCheck();

와 드디어 자바스크립트 코드로 html 코드 넣기 완성 

 

 

✅ For loop (반복문) 

 

자바스크립트로 코드 넣는 법은 해결하였으니 이제 for 반복문을 활용하여 비슷한 코드를 여러개 넣어 보려 한다

 

- array 배열

let condiment = ['Red pepper paste', 'Mayonnaise', 'Ketchup', 'Soy Sauce', 'Chilli Powder', 'Fish Sauce', 'Chilli Sauce', 'Barbeque Sauce', 'Hot Sauce', 'Mustard', 'Balsamic Vinegar', 'Vinegar', 'Apple Vinegar', 'Oriental Dressing'];
const sauceLen = condiment.length;

function newCheck() {

    for(let i = 0; i < sauceLen; i++) {
        const leftBox = document.getElementsByClassName('article-detail')[0];
        const newDiv = document.createElement('div');
        leftBox.appendChild(newDiv);
    
        const input = document.createElement('input');
        input.type = 'checkbox';
        input.id = 'checkbox2';
        newDiv.appendChild(input);
    
        const label = document.createElement('label');
        label.innerHTML = condiment[i];
        label.htmlFor = 'checkbox2';
        newDiv.appendChild(label);
    }
}

newCheck();

array 배열 (객체) 사용하여 재료를 나열해서 

for loop (반복문) 과 함께 사용해봤다

 

 

그런데 문제는 input의 id가 전부 같아서 1탄에서 만들었던 hover 기능이 전부 해당 id 한 곳에만 적용이 된다 

id랑 label for 의 이름에 숫자가 1~100 이런식으로 자동으로 들어가게 하는 방법이 없을까.... 

for loop 구문을 두 가지도 적용을 할 수 있을까? 그리고 id를 checkbox1, checkbox2, checkbox3 이런 식으로 만들고 싶으면 

어떻게 해야 하는지 이럴 때 템플릿 리터럴을 사용해야 하는 건지 구글링해보고 다음 블로그를 작성해봐야겠다! 

 

 

 

//비전공자가 혼자 공부하는 공간입니다