I added multiple <option> for #inputPanel,then try to set <select>
for (i = 0 ;i < data.length;i++){
$('#inputPanel').append(`<option>${data[i]['name']}</option>`);
}
$('#inputPanel').after("</select>");
$('#inputPanel').before("<select>");
console.log($('#inputPanel').html()); // there is not select???
select tag is not added to DOM.
How can I make this??
An <option> doesn't make sense if it's not a child of a <select>. Create the <select> first.
const data = [{ name: 'a' }, { name: 'b' }];
const select = $('<select>').appendTo('#inputPanel');
for (const { name } of data) {
$('<option>')
.text(name) // .text is safer than direct interpolation
.appendTo(select);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputPanel"></div>