文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将动态生成的DOM元素的递归部分附加到其父元素？

问如何将动态生成的DOM元素的递归部分附加到其父元素？
EN

Stack Overflow用户
提问于 2021-07-02 06:26:12
回答 1查看 78关注 0票数 0

我正在尝试创建一个基于json数据的动态表单。

代码语言：javascript
复制
const input_def =     {
           "model_class":"Conditional",
           "name":"SelPlotting",
           "type":"conditional",
           "cases":[
              {
                 "model_class":"ConditionalWhen",
                 "value":"HeatMap",
                 "inputs":[
                    {
                       "model_class":"DataToolParameter",
                       "name":"InFile",
                       "argument":"--InFile",
                       "type":"data",
                       "label":"Input file",
                       "help":"Tabular data file",
                       "refresh_on_change":true,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"None",
                       "extensions":[
                          "tabular"
                       ],
                       "edam":{
                          "edam_formats":[
                             "format_3475"
                          ],
                          "edam_data":[
                             "data_0006"
                          ]
                       },
                       "multiple":false,
                       "options":{
                          "hda":[
                             
                          ],
                          "hdca":[
                             
                          ]
                       }
                    },
                    {
                       "model_class":"TextToolParameter",
                       "name":"IndexColumn",
                       "argument":"--IndexColumn",
                       "type":"text",
                       "label":"Index Column",
                       "help":"Column name that contains index as row/sample names ",
                       "refresh_on_change":false,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"Index",
                       "area":false,
                       "datalist":[
                          
                       ]
                    },
                    {
                       "model_class":"TextToolParameter",
                       "name":"x_label",
                       "argument":"--x_label",
                       "type":"text",
                       "label":"Label for x-axis",
                       "help":"A label that describes x axis",
                       "refresh_on_change":false,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"x-axis",
                       "area":false,
                       "datalist":[
                          
                       ]
                    },
                    {
                       "model_class":"TextToolParameter",
                       "name":"y_label",
                       "argument":"--y_label",
                       "type":"text",
                       "label":"Label for y-axis",
                       "help":"A label that describes y axis",
                       "refresh_on_change":false,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"y-axis",
                       "area":false,
                       "datalist":[
                          
                       ]
                    }
                 ]
              },
              {
                 "model_class":"ConditionalWhen",
                 "value":"BoxPlot",
                 "inputs":[
                    {
                       "model_class":"DataToolParameter",
                       "name":"InFile",
                       "argument":"--InFile",
                       "type":"data",
                       "label":"Input file",
                       "help":"Tabular data file",
                       "refresh_on_change":true,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"None",
                       "extensions":[
                          "tabular"
                       ],
                       "edam":{
                          "edam_formats":[
                             "format_3475"
                          ],
                          "edam_data":[
                             "data_0006"
                          ]
                       },
                       "multiple":false,
                       "options":{
                          "hda":[
                             
                          ],
                          "hdca":[
                             
                          ]
                       }
                    },
                    {
                       "model_class":"TextToolParameter",
                       "name":"Feature",
                       "argument":"--Features",
                       "type":"text",
                       "label":"Feature name",
                       "help":"Name of the feature (column name)",
                       "refresh_on_change":false,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"Feature",
                       "area":false,
                       "datalist":[
                          
                       ]
                    },
                    {
                       "model_class":"TextToolParameter",
                       "name":"Label",
                       "argument":"--Label",
                       "type":"text",
                       "label":"Class label column",
                       "help":"Name of the column that contains class label",
                       "refresh_on_change":false,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"class label",
                       "area":false,
                       "datalist":[
                          
                       ]
                    }
                 ]
              },
              {
                 "model_class":"ConditionalWhen",
                 "value":"ScatterPlot",
                 "inputs":[
                    {
                       "model_class":"DataToolParameter",
                       "name":"InFile",
                       "argument":"--InFile",
                       "type":"data",
                       "label":"Input file",
                       "help":"Tabular data file",
                       "refresh_on_change":true,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"None",
                       "extensions":[
                          "tabular"
                       ],
                       "edam":{
                          "edam_formats":[
                             "format_3475"
                          ],
                          "edam_data":[
                             "data_0006"
                          ]
                       },
                       "multiple":false,
                       "options":{
                          "hda":[
                             
                          ],
                          "hdca":[
                             
                          ]
                       }
                    },
                    {
                       "model_class":"Conditional",
                       "name":"PlotType",
                       "type":"conditional",
                       "cases":[
                          {
                             "model_class":"ConditionalWhen",
                             "value":"2D",
                             "inputs":[
                                {
                                   "model_class":"TextToolParameter",
                                   "name":"Features1",
                                   "argument":"--RotationX",
                                   "type":"text",
                                   "label":"First feature",
                                   "help":"Feature column name",
                                   "refresh_on_change":false,
                                   "optional":false,
                                   "hidden":false,
                                   "is_dynamic":false,
                                   "value":"feature1",
                                   "area":false,
                                   "datalist":[
                                      
                                   ]
                                },
                                {
                                   "model_class":"TextToolParameter",
                                   "name":"Features2",
                                   "argument":"--RotationY",
                                   "type":"text",
                                   "label":"Second feature",
                                   "help":"Feature column name",
                                   "refresh_on_change":false,
                                   "optional":false,
                                   "hidden":false,
                                   "is_dynamic":false,
                                   "value":"feature2",
                                   "area":false,
                                   "datalist":[
                                      
                                   ]
                                }
                             ]
                          },
                          {
                             "model_class":"ConditionalWhen",
                             "value":"3D",
                             "inputs":[
                                {
                                   "model_class":"TextToolParameter",
                                   "name":"Features1",
                                   "argument":"--RotationX",
                                   "type":"text",
                                   "label":"First feature",
                                   "help":"Feature column name",
                                   "refresh_on_change":false,
                                   "optional":false,
                                   "hidden":false,
                                   "is_dynamic":false,
                                   "value":"feature1",
                                   "area":false,
                                   "datalist":[
                                      
                                   ]
                                },
                                {
                                   "model_class":"TextToolParameter",
                                   "name":"Features2",
                                   "argument":"--RotationY",
                                   "type":"text",
                                   "label":"Second feature",
                                   "help":"Feature column name",
                                   "refresh_on_change":false,
                                   "optional":false,
                                   "hidden":false,
                                   "is_dynamic":false,
                                   "value":"feature2",
                                   "area":false,
                                   "datalist":[
                                      
                                   ]
                                },
                                {
                                   "model_class":"TextToolParameter",
                                   "name":"Features3",
                                   "argument":"--FigHight",
                                   "type":"text",
                                   "label":"Third feature",
                                   "help":"Feature column name",
                                   "refresh_on_change":false,
                                   "optional":false,
                                   "hidden":false,
                                   "is_dynamic":false,
                                   "value":"feature3",
                                   "area":false,
                                   "datalist":[
                                      
                                   ]
                                }
                             ]
                          }
                       ],
                       "test_param":{
                          "model_class":"SelectToolParameter",
                          "name":"SelectPlot",
                          "argument":"",
                          "type":"select",
                          "label":"Scatter Plot type",
                          "help":"Scatter Plot type 2D or 3D.",
                          "refresh_on_change":true,
                          "optional":false,
                          "hidden":false,
                          "is_dynamic":false,
                          "value":"2D",
                          "options":[
                             [
                                "2D",
                                "2D",
                                false
                             ],
                             [
                                "3D",
                                "3D",
                                false
                             ]
                          ],
                          "display":"None",
                          "multiple":false,
                          "textable":false
                       }
                    },
                    {
                       "model_class":"TextToolParameter",
                       "name":"Label",
                       "argument":"--Label",
                       "type":"text",
                       "label":"Class label column",
                       "help":"Name of the column that contains class label",
                       "refresh_on_change":false,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"class label",
                       "area":false,
                       "datalist":[
                          
                       ]
                    }
                 ]
              },
              {
                 "model_class":"ConditionalWhen",
                 "value":"WordCloud",
                 "inputs":[
                    {
                       "model_class":"DataToolParameter",
                       "name":"InFile",
                       "argument":"--InFile",
                       "type":"data",
                       "label":"Input file",
                       "help":"Fasta file with peptides",
                       "refresh_on_change":true,
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"None",
                       "extensions":[
                          "fasta"
                       ],
                       "edam":{
                          "edam_formats":[
                             "format_1929"
                          ],
                          "edam_data":[
                             "data_2044"
                          ]
                       },
                       "multiple":false,
                       "options":{
                          "hda":[
                             
                          ],
                          "hdca":[
                             
                          ]
                       }
                    },
                    {
                       "model_class":"IntegerToolParameter",
                       "name":"d",
                       "argument":"--FragSize",
                       "type":"integer",
                       "label":"Size of ngrams",
                       "help":"Size of ngrams",
                       "refresh_on_change":false,
                       "min":"None",
                       "max":"None",
                       "optional":false,
                       "hidden":false,
                       "is_dynamic":false,
                       "value":"4",
                       "area":false,
                       "datalist":[
                          
                       ]
                    }
                 ]
              }
           ],
           "test_param":{
              "model_class":"SelectToolParameter",
              "name":"Plot",
              "argument":"",
              "type":"select",
              "label":"Data plotting method",
              "help":"Data plotting method",
              "refresh_on_change":true,
              "optional":false,
              "hidden":false,
              "is_dynamic":false,
              "value":"HeatMap",
              "options":[
                 [
                    "Heat Map",
                    "HeatMap",
                    false
                 ],
                 [
                    "Box Plot",
                    "BoxPlot",
                    false
                 ],
                 [
                    "Scatter Plot",
                    "ScatterPlot",
                    false
                 ],
                 [
                    "Word Cloud",
                    "WordCloud",
                    false
                 ]
              ],
              "display":"None",
              "multiple":false,
              "textable":false
           }
        }

我使用此函数动态生成HTML部分

代码语言：javascript
复制
 AddConditoinalSection2 (input_def ) {

        input_def.id = this.uid()

        var ConditionalDiv

        for (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()
                    const SimpleRow  = document.createElement('div')
                    SimpleRow.className = 'ui-form-element section-row' 
                    SimpleRow.id = input_def.cases[i].inputs[j].id
                    ConditionalDiv.append(SimpleRow)
                } 

                else{

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

            }

            this.element.querySelector('.Dynamic-form').append(ConditionalDiv)
   
        }

       
    }

和一个生成唯一ID的小函数。

代码语言：javascript
复制
   uid () {
        top.__utils__uid__ = top.__utils__uid__ || 0;
        return `uid-${top.__utils__uid__++}`;
    }

这些函数生成如下所示的部分

代码语言：javascript
复制
<form class="Dynamic-form">
    <div class="ui-form-element section-row pl-2" id="uid-0-section-0">
        <div class="ui-form-element section-row" id="uid-1"></div>
        <div class="ui-form-element section-row" id="uid-2"></div>
        <div class="ui-form-element section-row" id="uid-3"></div>
        <div class="ui-form-element section-row" id="uid-4"></div>
    </div>
    <div class="ui-form-element section-row pl-2" id="uid-0-section-1">
        <div class="ui-form-element section-row" id="uid-5"></div>
        <div class="ui-form-element section-row" id="uid-6"></div>
        <div class="ui-form-element section-row" id="uid-7"></div>
    </div>
    <div class="ui-form-element section-row pl-2" id="uid-10-section-0">
        <div class="ui-form-element section-row" id="uid-11"></div>
        <div class="ui-form-element section-row" id="uid-12"></div>
    </div>
    <div class="ui-form-element section-row pl-2" id="uid-10-section-1">
        <div class="ui-form-element section-row" id="uid-13"></div>
        <div class="ui-form-element section-row" id="uid-14"></div>
        <div class="ui-form-element section-row" id="uid-15"></div>
    </div>
    <div class="ui-form-element section-row pl-2" id="uid-0-section-2">
        <div class="ui-form-element section-row" id="uid-8"></div>
        <div class="ui-form-element section-row" id="uid-16"></div>
    </div>
    <div class="ui-form-element section-row pl-2" id="uid-0-section-3">
        <div class="ui-form-element section-row" id="uid-17"></div>
        <div class="ui-form-element section-row" id="uid-18"></div>
    </div>
</form>

我的问题是，每当在inputs (input_def.cases[i].inputs[j].type === 'conditional')中遇到条件块时，我就想要附加递归节

代码语言：javascript
复制
  <div class="ui-form-element section-row pl-2" id="uid-0-section-1">
    <div class="ui-form-element section-row" id="uid-5"></div>
    <div class="ui-form-element section-row" id="uid-6"></div>
    <div class="ui-form-element section-row" id="uid-7"></div>

    <div class="ui-form-element section-row pl-2" id="uid-10-section-0">
        <div class="ui-form-element section-row" id="uid-11"></div>
        <div class="ui-form-element section-row" id="uid-12"></div>
    </div>
    <div class="ui-form-element section-row pl-2" id="uid-10-section-1">
        <div class="ui-form-element section-row" id="uid-13"></div>
        <div class="ui-form-element section-row" id="uid-14"></div>
        <div class="ui-form-element section-row" id="uid-15"></div>
    </div>
  </div>

我应该在这段代码中做哪些更改才能得到这个结果？

我想要的最终结果

代码语言：javascript
复制
<form class="Dynamic-form">
    <div class="ui-form-element section-row pl-2" id="uid-0-section-0">
        <div class="ui-form-element section-row" id="uid-1"></div>
        <div class="ui-form-element section-row" id="uid-2"></div>
        <div class="ui-form-element section-row" id="uid-3"></div>
        <div class="ui-form-element section-row" id="uid-4"></div>
    </div>

    <div class="ui-form-element section-row pl-2" id="uid-0-section-1">
        <div class="ui-form-element section-row" id="uid-5"></div>
        <div class="ui-form-element section-row" id="uid-6"></div>
        <div class="ui-form-element section-row" id="uid-7"></div>

        <div class="ui-form-element section-row pl-2" id="uid-10-section-0">
            <div class="ui-form-element section-row" id="uid-11"></div>
            <div class="ui-form-element section-row" id="uid-12"></div>
        </div>

        <div class="ui-form-element section-row pl-2" id="uid-10-section-1">
            <div class="ui-form-element section-row" id="uid-13"></div>
            <div class="ui-form-element section-row" id="uid-14"></div>
            <div class="ui-form-element section-row" id="uid-15"></div>
        </div>
        
    </div>

    <div class="ui-form-element section-row pl-2" id="uid-0-section-2">
        <div class="ui-form-element section-row" id="uid-8"></div>
        <div class="ui-form-element section-row" id="uid-16"></div>
    </div>
    <div class="ui-form-element section-row pl-2" id="uid-0-section-3">
        <div class="ui-form-element section-row" id="uid-17"></div>
        <div class="ui-form-element section-row" id="uid-18"></div>
    </div>
</form>
html
forms
recursion
dom
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-06 12:30:45

你需要在你的函数中做一个小的改变来使它工作。您需要向AddConditoinalSection2函数添加一个参数，以指定要在哪个父级中附加div。

代码语言：javascript
复制
AddConditoinalSection2 (input_def,parent ) {

    input_def.id = this.uid()

    var ConditionalDiv

    for (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()
                const SimpleRow  = document.createElement('div')
                SimpleRow.className = 'ui-form-element section-row' 
                SimpleRow.id = input_def.cases[i].inputs[j].id
                ConditionalDiv.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)

    }

在最初调用函数时，只需传递给main div一个父级

代码语言：javascript
复制
AddConditoinalSection2 (data,this.element.querySelector('.Dynamic-form'))
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68217583

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档