Dynamically creating lightning combobox

Question

I would like to preface this by stating that I only started Salesforce development about a month ago so forgive me if this an obvious questions.

Here is my problem:

I currently use an apex method to get field data from a fieldset in a JSON string and would like to display these fields and their picklist options in lightning comboboxes. I cannot assume the number of fields in the fieldset or the type of the fields or the values for the picklist.

I see that in the documentation (https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/example) the options for the combobox are directly pulled from a variable in the javascript but I would like to make it such that they are static and can be contructed in javascript.

I have tried using 'for:each' and directly manipulating the JSON string of the fields in the html, but no luck. Instead I am opting to loop through the fields in the JSON and would like to construct the combobox while looping and add it to the DOM. Is it possible to create the combo box from the javascript and add it to the DOM? Also, what are the best practices when wanting to add elements to the DOM.

questions.js

@wire(getQuestions, {objectName: 'Questions', fieldSetName: 'DND'})
questions;

if (questions) {
    const obj = JSON.parse(questions);
    var field = obj[0]
    var label = field.fieldLabel;
    var fieldAPIName = field.fieldAPIName;
    var options = []
    field.pickListValues.forEach(optionValues => {
        options.push({label: optionValues.label, value: optionValues.value})
    });
    var element =   '<lightning-combobox ' +
                    'name="' + fieldAPIName + '" '
                    'label="' + label + '" ' +
                    'placeholder="Select answers" ' +
                    'options=' + options +
                    '></lightning-combobox>';
    
    document.getElementById('question-box').appendChild(element);
}

questions.html

<template>
    <lightning-card  title="Screening Questions">
        <template id="question-box" if:true={questions.data}>
        </template>
    </lightning-card>
</template>

Answer 1

For those who may be interested in my solutions, I created an array of objects that could be referenced from the HTML using the for:each directive.

question.js

export default class questions extends LightningElement {
    questions = [];

    @wire(getQuestions, {objectName: 'Questions', fieldSetName: 'DND'})
    getQuestions({data}){
        if (data) {
            const json = JSON.parse(data);
            console.log(json)
            json.forEach(obj => {
                var fieldLabel = '';
                var options = [];
                var value = '';
                var APIName = '';
                var fieldType = '';
                var picklist = false;
                var multipicklist = false;
    
                console.log(obj);
                APIName = obj.fieldAPIName;
                fieldLabel = obj.fieldLabel;
                fieldType = obj.fieldType;

                if (fieldType == 'PICKLIST'){ picklist = true;}
                else if (fieldType == 'MULTIPICKLIST'){ multipicklist = true; }
            
                obj.pickListValues.forEach(optionValue => {
                    var pickListOptions = {}
                    Object.assign(pickListOptions, {label: optionValue.label});
                    Object.assign(pickListOptions, {value: optionValue.value});
                    options = [...options, pickListOptions];
                });
                var questionObj = {};
                
                Object.assign(questionObj, {options: options});
                Object.assign(questionObj, {fieldLabel: fieldLabel});
                Object.assign(questionObj, {value: value});
                Object.assign(questionObj, {name: APIName});
                Object.assign(questionObj, {fieldType: fieldType});
                Object.assign(questionObj, {picklist: picklist});
                Object.assign(questionObj, {multipicklist: multipicklist});
                this.questions = [...this.questions, questionObj]
            });
        }
    }
}