Method to add an element via innerHTML

Question

const myElement = document.createElement("div");
let selectItems = data.map((select, i) => (
    `<div class="select">
        <div aria-required="true" class="selectBtn" data-type="">${select.placeholder}</div>    
            <div class="selectDropdown">${select.option.map(el =>
                    `<div class="option" data-type="firstOption">${el}</div>`
            ).join('')}
        </div>
    </div>`)
)

const eles = document.getElementsByClassName("select");
for (let i = 0; i < eles.length; i++) {
    myElement.innerHTML = selectItems[i]; ///loop
    eles[i].appendChild(myElement.cloneNode(true));
}

I'm trying to add elements through a loop but an infinite loop occurs

Answer 1

You are trying to access an invalid indess for selectedItems array. You should append all items together to myElement after you should append this updated element to your dom.

I directly appended to body but you can change it.

const myElement = document.createElement("div");
let selectItems = data.map((select, i) => (
    `<div class="select">
        <div aria-required="true" class="selectBtn" data-type="">${select.placeholder}</div>    
            <div class="selectDropdown">${select.option.map(el =>
                    `<div class="option" data-type="firstOption">${el}</div>`
            ).join('')}
        </div>
    </div>`)
)

for (let i = 0; i < selectItems.length; i++) {
    myElement.innerHTML += selectItems[i];
}

document.body.appendChild(myElement);