Javascript 如何正确呈现我的节点树？

我想使用JS对象构建一个DOM树（经典主题）。我完成了大部分工作，但我得到了一个无意义的结果：DOM树似乎创建正确，但所有节点都在一行上呈现为平坦，输入元素被剪裁

我高度怀疑

buildNode

函数工作不正常，但我找不到该漏洞

/****过滤器****/
//TODO:使用字典更改蹩脚的过滤器
常量属性=（str）=>！（str=='content'| | str=='tag'| | str=='children'）；
/****测验****/
const hasChildren=（obj）=>obj.hasOwnProperty（'children'），
hascantent=（obj）=>obj.hasOwnProperty（'content'）；
//TODO:搜索给定标记名（SVG）的命名空间
const findNameSpace=（str）=>null；
//使用正确的属性和值构建节点
const buildNode=函数（元素，父级）{
常量标记=（element.tag | |'div'），
tagAttr=Object.keys（element.filter）（仅限attr），
node=document.createElements（findNameSpace（标记），标记）；
塔加特·弗雷赫(
（attr）=>node.setAttributeNS（findNameSpace（标记）、attr、元素[attr]）
);
hasContent（元素）？node.innerHTML=element.content:null；
返回parent.appendChild（节点）；
}
//使用函数f沿着树映射当前元素。
函数walkTree（f、元素、父级）{
常数电流=f（元素，父元素）；
//如有必要，重新步行带孩子
（haschilds（element）和&element.children.forEach(
child=>walkTree（f，child，current）
));
};
让树={
标签：“div”，
id:'树'，
儿童：[{
标记：'节'，
id:“第l1-1节”，
类别：“l1”，
内容：“用我的本色，我很漂亮！”，
儿童：[{
标签：“div”，
id:'div-l2'，
类别：“l2”，
儿童：[{
标签：“p”，
内容：“这是一个嵌套段落。”
}]
}, {
标签：'表格'，
id:‘form-l2’，
类别：“l2”，
onsubmit:'alert（“调用的函数！”）；'，
儿童：[{
标记：“输入”，
键入：“文本”，
id:'input-l3'，
类别：“l3”，
值：“自动关闭标签盒！”
}]
}]
}, {
标记：“页脚”，
id:'结束页'，
类别：“l1”，
内容：“这是一个正在进行的实验。”
}]
};
walkTree（buildNode、tree、document.getElementById（'seed'）
#种子分区、表单、输入{
显示：块；
}
所以我发现名称空间的处理是我的问题。因为我想同时获得呈现HTML元素和SVG元素，所以我需要

我没有找到解决该问题的正确方法，因此我设置了较低的期望值，只使用
document.createElement（）
（和
Node.setAttribute（）
）而不是
document.createElements（）
（和
Node.setAttributes（）
）呈现HTML

要了解命名空间处理的进展情况，请执行以下操作：


/*字典*/
const nonAttr=['content'，'tag'，'children']，
//搜索标记的特殊名称空间。资料来源：https://www.w3.org/TR/2011/WD-html5-20110525/namespaces.html
标记命名空间={
“svg”：”https://www.w3.org/2000/svg'
};
/****过滤器****/
常量属性=（str）=>！（不包括（str））；
/****测验****/
const hasChildren=（obj）=>obj.hasOwnProperty（'children'），
hascantent=（obj）=>obj.hasOwnProperty（'content'）；
//搜索给定标记名的命名空间
const findNameSpace=（str）=>（标记名称空间[str]| |'http://www.w3.org/1999/xhtml');
//使用正确的属性和值构建节点
const buildNode=函数（元素，父级）{
常量标记=（element.tag | |'div'），
tagAttr=Object.keys（element.filter）（仅限attr），
node=document.createElements（findNameSpace（标记），标记）；
塔加特·弗雷赫(
（attr）=>node.setAttribute（attr，元素[attr]）
);
hasContent（元素）？node.innerHTML=element.content:null；
返回parent.appendChild（节点）；
}
//使用函数f沿着树映射当前元素。
函数walkTree（f、元素、父级）{
常数电流=f（元素，父元素）；
//如有必要，重新步行带孩子
（haschilds（element）和&element.children.forEach(
child=>walkTree（f，child，current）
));
};
让树={
标签：“div”，
id:'树'，
儿童：[{
标记：'节'，
id:“第l1-1节”，
类别：“l1”，
内容：“用我的本色，我很漂亮！”，
儿童：[{
标签：“div”，
id:'div-l2'，
类别：“l2”，
儿童：[{
标签：“p”，
内容：“这是一个嵌套段落。”
}]
}, {
标签：'表格'，
id:‘form-l2’，
类别：“l2”，
onsubmit:'alert（“调用的函数！”）；'，
行动：“”，
方法：“GET”，
儿童：[{
标记：“输入”，
键入：“文本”，
id:'text-l3'，
名称：“text-l3”，
类别：“l3”，
占位符：“自动关闭标签盒！”
},{
标记：“输入”，
键入：“提交”，
id:“提交-l3”，
名称：“提交-l3”，
类别：“l3”，
值：“提交！”
}]
}]
}, {
标记：“页脚”，
id:'结束页'，
类别：“l1”，
内容：“这是一个正在进行的实验。”，
儿童：[{
标签：“svg”，
类别：“l2”，
儿童：[{
标签：“rect”，
宽度：“10”，
高度：'10'，
填充：“黑色”
}]
}]
}]
};
walkTree（buildNode、tree、document.getElementById（'seed'）
.l1{
背景色：暗灰色；
}
.l2{
背景颜色：灰色；
}
.l3{
背景颜色：浅灰色；
}
.l4{
背景色：白色；
}
代码本身很好，您只需声明一行新行或附加一行

即可达到相同的效果。我不需要任何

。。。我编辑了代码段并添加了一些样式
display:block
。输入仍然是隐藏的。看起来所有节点都连接在一起了。如果我使用开发人员工具手动编辑表单的节点，则会显示输入！真是