javascript中的递归，以使用具有单个父元素的子元素构建HTML

我有一个json对象，我在上面循环并用每个对象构建html块。到目前为止，我已经让它正常工作了，但是我遇到了子项不在它自己的父容器中的问题。我也不希望顶级项目包含在父容器中

任何帮助和建议都将不胜感激

//测试json数据
var jsonTest={
“myJson”：[
{
“类型”：“链接”，
“导航索引”：0，
“formData”：
{
“标签”：“链接”，
“url”：”https://www.google.com"
},
“儿童项目”：[
{
“类型”：“列”，
“导航索引”：0，
“formData”：
{
“标签”：“第1列”
},
“子项”：[]
},
{
“类型”：“列”，
“导航索引”：1，
“formData”：
{
“标签”：“第2列”
},
“子项”：[]
},
{
“类型”：“列”，
“导航索引”：2，
“formData”：
{
“标签”：“第3列”
},
“子项”：[]
},
{
“类型”：“列”，
“导航索引”：3，
“formData”：
{
“标签”：“第4列”，
},
“子项”：[]
}]
}]
};
//主构建功能
函数buildFromJson（）{
var jsonData=jsonTest.myJson；
附录（$（“.root”）、jsonData；
}
//html模板
函数getLinkContainer（类型、标签、url）{
变量元素=`
`;
返回元素；
};
函数getColumnContainer（类型、标签）{
变量元素=`
${label}
`;
返回元素；
}
//递归以获取所有数据
函数appendDom（容器，jsonData）{
对于（var i=0；i
您需要使用容器，而不是$divParent

问题更新后

创建新的元素并始终将其附加到当前的容器，然后检查是否有子元素并将它们附加到该元素


var jsonTest={
“myJson”：[
{
“类型”：“链接”，
“导航索引”：0，
“formData”：
{
“标签”：“链接”，
“url”：”https://www.google.com"
},
“儿童项目”：[
{
“类型”：“列”，
“导航索引”：0，
“formData”：
{
“标签”：“第1列”
},
“子项”：[]
},
{
“类型”：“列”，
“导航索引”：1，
“formData”：
{
“标签”：“第2列”
},
“子项”：[]
},
{
“类型”：“列”，
“导航索引”：2，
“formData”：
{
“标签”：“第3列”
},
“子项”：[]
},
{
“类型”：“列”，
“导航索引”：3，
“formData”：
{
“标签”：“第4列”，
},
“子项”：[]
}]
}]
};
//主构建功能
函数buildFromJson（）{
var jsonData=jsonTest.myJson；
附录（$（“.root”）、jsonData；
}
//html模板
函数getLinkContainer（类型、标签、url）{
变量元素=`
`;
返回元素；
}
;
函数getColumnContainer（类型、标签）{
变量元素=`
${label}
`;
返回元素；
}
//递归以获取所有数据
函数appendDom（容器，jsonData）{
对于（var i=0；i

非常感谢！我想弄明白这件事，真是疯了。绝对的传奇！跟进问题。是否有办法将子项插入顶级容器中？我已经编辑了我的原始问题以获得预期的结果（对不起！）。谢谢