Javascript 如何从二维数组创建html？

我的数组包含子元素和父元素对。每个

子数组的第一个元素是子元素，第二个是父元素

var myArray = [['activity', 'none'] , 
               ['movies', 'activity'],
               ['theater','activity'],
               ['drama', 'movies'],
               ['comedy', 'movies'],    
               ['puppet', 'theater'], 
                    . . 
               ];

我需要动态创建以下HTML：

<div id='activity'>activity

     <div id='movies'>movies
               <div id='drama'>drama</div>
               <div id='comedy'>comedy</div>  
     </div>

     <div id='theater'>
               <div id='puppet'>puppet</div>
     </div>

</div>

活动
电影
戏剧
喜剧片
木偶

我试图写一个递归函数，但一切都搞砸了。我需要递归函数吗
 为什么不试试对象，而不是
元素-父关系

下面是普通的JavaScript，不需要jQuery

编辑：我将保留我的原始答案，但如果您想要更可靠的解决方案，请查看底部的脚本


var myObject={
“id”：“活动”，
“文本”：“活动”，
“儿童”：[{
“id”：“电影”，
“文本”：“电影”，
“儿童”：[{
id:“戏剧”，
“文本”：“戏剧”
},{
id:“喜剧”，
“文本”：“喜剧”
}]
},{
“id”：“剧院”，
“文本”：“剧院”，
“儿童”：[{
“id”：“木偶”，
“文本”：“木偶”
}]
}]
}
var GENEATEHTML=函数（数据，目标）{
var节点=document.createElement（“div”）；
if（data.id）node.setAttribute（“id”，data.id）；
if（data.text）node.appendChild（document.createTextNode（data.text））；
targetEle.appendChild（节点）；
if（数据子项）{
data.children.forEach（函数（子、索引、同级）{
generateHTML（子，节点）；//递归。。。
}，这个）；
}
}
generateHTML（myObject，document.body）
div>div{
左边距：2米；
}
以下代码片段生成预期结果：


var myArray=[['activity'，'none']，
[‘电影’、‘活动’]，
[“剧院”、“活动”]，
[‘戏剧’、‘电影’]，
[‘喜剧’、‘电影’]，
[‘木偶’、‘戏剧’]，
];
var节点={}；
for（myArray中的变量i）{
var child=myArray[i][0]；
var parent=myArray[i][1]；
var children=节点[parent]| |[]；
推（儿童）；
节点[父节点]=子节点；
}
var divFromNode=函数（父级）{
var div=$（“”）；
var children=节点[父节点]；
div.text（父级）；
用于（儿童中的i）{
var child=childs[i]；
div.append（divFromNode（子节点））；
}
返回div；
}
$（“body”）.append（divFromNode（nodes[“none”][0]）
div>div{
左边距：2米；
}
您是否尝试过使用模板引擎？您能否提供一个尝试？分配变量并不是真正的编码。。。您需要提供逻辑。如果您提到使用了递归函数，请向我们展示；-）您是否可以控制用于数据的阵列的结构？如果是这样的话，您可以用不同的结构来构造myArray，以便于理解关系和呈现HTML。这是表格结构。第一个字段是子元素，第二个字段是父元素。我需要将这个表转换成HTML。手动操作非常简单，但是表是您的小提琴移到这里的。我还添加了CSS，因为为什么不呢-这是最好的解决办法+1@user3191304您应该将其用于教育目的