How To Append Dynamically Generated Recursive Sections Of Dom Elements To Its Parent Element?

I am trying to create a dynamic form based on the json data const input_def = { 'model_class':'Conditional', 'name':'SelPlotting', 'type':'cond

Solution 1:

You need to make a small change in your function to make this work. You need to add an argument to the AddConditoinalSection2 function to specify in which parent to want to append the div.

AddConditoinalSection2 (input_def,parent ) {

    input_def.id = this.uid()

    varConditionalDivfor (var i in input_def.cases) {

        ConditionalDiv  = document.createElement('div')
        ConditionalDiv.className = 'ui-form-element section-row pl-2'ConditionalDiv.id = `${input_def.id}-section-${i}`for (var j in input_def.cases[i].inputs ) {

            if (input_def.cases[i].inputs[j].type !== 'conditional') {

                input_def.cases[i].inputs[j].id = this.uid()
                constSimpleRow  = document.createElement('div')
                SimpleRow.className = 'ui-form-element section-row'SimpleRow.id = input_def.cases[i].inputs[j].idConditionalDiv.append(SimpleRow)
            } 

            else{

                input_def.cases[i].inputs[j].id = this.uid()
                this.AddConditoinalSection2(input_def.cases[i].inputs[j],ConditionalDiv)
            }

        }

        parent.querySelector('.Dynamic-form').append(ConditionalDiv)

    }

and when calling the function initially just pass the main div a parent

AddConditoinalSection2 (data,this.element.querySelector('.Dynamic-form'))