如何将javascript变量添加到html标签

Question

I have a function whose name is rendered which get two params: the container is a <select> in HTML and items just is my student array of an object which contains information of each student and it has 'class' property.

My idea is to create an <opgroup> tag in string and then pass it to HTML through .innerHTML . The problem is that I want to create a new <optgroup> relatively to student's class to separate each class, but I have no idea of passing object.class 's value to the <optgroup> label. Can you show me the way to pass a JavaScript variable to this <optgroup id="optgroup-class"></optgroup> string in a js file?

function render(container, items) {

    var htmlItems = items.map(function (item) {
        return '<option id="std-option">' + item.name + '</option>';
    });

    htmlItems.unshift('<optgroup id="optgroup-class"></optgroup>'); //add optgroup to the first index of htmlItems

    var html = htmlItems.join(''); //join all the <stringArray> to just one html tag string
    container.innerHTML = html; //get that <stringArray> to .student-list-container select in html
}

Answer 1

El método unshift() agrega uno o más elementos al inicio del array, y devuelve la nueva longitud del array. Link

so, you are add <optgroup id="optgroup-class"></optgroup> at index 0

// [ '<optgroup id="optgroup-class"></optgroup>', '<option id="std-option"> name1 </option>', '<option id="std-option"> name1 </option>' ]

Answer 2

Try this below.

 function render(container, items) { let html = ''; items.forEach(e => { html += `<optgroup label="${e.name}">`; e.options.forEach(o => { html += `<option value="${o.name}">${o.name}</option>`; }); html += `</optgroup>`; }); container.innerHTML = html; } let list = [{ name: 'Swedish Cars', options: [{ name: 'Volvo' }, { name: 'Saab' } ] }, { name: 'German Cars', options: [{ name: 'Mercedes' }, { name: 'Audi' } ] }]; render(document.getElementById('my-select'), list); 

 <select id="my-select"></select>