乍一看,我似乎正在寻找一个简单的 JS 模板引擎,但我正在寻找的东西更复杂。起初我想过自己编写这个代码,但我想得越多,我无法想象以前没有这样做过。
简单地说:我正在寻找能够接受以下对象文字并构建以下 HTML 的东西。
{
tagName : 'div',
className : 'container',
children :
[
{
tagName : 'h1',
className : 'page-title',
text : 'My Awesome Page!'
},
{
tagName : 'a',
className : 'class-i-gave-to-this-link',
text : 'Check out my other awesome page!',
attr :
{
href: 'http://my.awesome-page.com/'
}
}
]
}
所需的 HTML 效果:
<div class="container">
<h1 class="page-title">My Awesome Page!</h1>
<a class="class-i-gave-to-this-link" href="http://my.awesome-page.com/">Check out my other awesome page!</a>
</div>
最佳答案
这是我对递归解决方案的破解:
var jsonToHtml = function(node) {
var tag = document.createElement(node.tagName);
tag.className = node.className || "";
if(node.text) {
tag.innerHTML = node.text;
}
if(node.children) {
for(var i = 0; i < node.children.length; i++) {
tag.appendChild(jsonToHtml(node.children[i]));
}
}
if(node.attr) {
for(var key in node.attr) {
tag.setAttribute(key, node.attr[key]);
}
}
return tag;
};
这是一个 jsFiddle
关于javascript - 寻找从 JSON/object 构建 DOM 客户端的 JS 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12171652/