Javascript 安全的json html方式？

我的问题很简单，我想用json重新创建一个html页面， 但我不想弄乱现有的html，框架和公司

例如：

var myDiv = { tag : "div", style : "color:blue", class : "jj", content : "Hello"};

var myDiv={tag:“div”，样式：“color:blue”，类：“jj”，内容：“Hello”}；
var param={禁止：{tag:true，content:true}}；
var createTag=函数（o）{
var节点=document.createElement（o.tag）；
用于（收件人在o）{
如果（！param.bank[att]）node.setAttribute（att，o[att]）；
}
node.appendChild（document.createTextNode（o.content））
返回节点；
}
document.body.textContent=createTag（myDiv）.outerHTML为了避免与属性冲突，我会将它们分开

var myDiv = {
  tagName: "div",
  attributes: {
    style: "color: blue",
    class: "jj"
  },
  childNodes: ["Hello"]
};


函数解析树（节点）{
if（typeof节点==='string'）//文本节点
返回单据.createTextNode（节点）；
否则，假设一个元素。
//`node.nodeType`如果需要多个节点类型
var el=document.createElement（node.tagName）；
if（node.hasOwnProperty（'attributes'））
for（node.attributes中的var attr）
if（node.attributes.hasOwnProperty（attr））
el.setAttribute（attr，node.attributes[attr]）；
if（node.hasOwnProperty（'childNodes'））
node.childNodes.forEach（函数（子）{
el.appendChild（parseTree（child））；
});
返回el；
}
document.body.textContent=parseTree({
标记名：“div”，
属性：{
款式：“颜色：蓝色”，
班级：“jj”
},
子节点：[“你好”]
}).outerHTML如果愿意，您可以尝试以下方法：

["div", {style: "color:blue", class: "jj"}, ["Hello"]]

对于内部元素，您可以执行以下操作：

["div", {style: "color:blue", class: "jj"}, [[
  "p",
  "hello"
]]]

下面是解析代码（仅是
parseTree
函数）——我还添加了一种尝试方法（HTML是用基于json的格式编写的，作为示例）


html=[“div”，[[“div”，
[
[“p”，[“试试看：”]，
[
“代码”{
id:“尝试”，
样式：“显示：块”，
contentEditable:真
},
['[“div”，{style:“color:blue；”，class:“jj”}，[“Hello”]]]
],
[“按钮”{
“onclick”：“return tryOut（）；”
},
[“运行”]
]
]
]，[“div”，{id:“结果包装器”}]]
window.tryOut=函数（）{
var el=parseTree（eval（document.querySelector（“code#try”）.innerText））；
var持有人=document.createElement（“div”）；
持票人：儿童（el）；
document.querySelector（“#结果包装器”）.innerHTML=holder.innerHTML；
}
document.body.appendChild（parseTree（html））；
函数解析树（tree）{
if（树的类型==='string'）{
返回单据.createTextNode（树）；
}
var el=document.createElement（树[0]），
属性，简单，内部；
如果（tree.length==2）{
if（Array.isArray（树[1]））{
内部=树[1]；
}否则{
attrs=树[1]；
}
}else if（tree.length==3）{
attrs=树[1]；
内部=树[2]；
}否则{
简单=正确；
}
如果（！简单）{
如果（属性）{
for（属性中的var attr）
if（属性hasOwnProperty（属性））{
console.log（attr）
console.log（attrs[attr]）
el.setAttribute（attr，attrs[attr]）；
}
}
如果（内部）{
内部.forEach（函数（子函数）{
el.appendChild（parseTree（child））；
});
}
}
返回el；
}
如果（！Array.isArray）{
Array.isArray=函数（arg）{
返回Object.prototype.toString.call（arg）='[objectarray]'；
};
}
你能解释一下为什么你想这样做，而不仅仅是编写HTML吗？看看hoquet，也许这就是你需要的。这似乎就是“不简单”的定义。请在你的问题中包含你尝试过的代码以及你遇到的问题。就目前而言，这是一个“给我一个代码”式的问题，要么因为太宽而关闭，要么因为没有一个@zzzzBov我刚刚有了一个工作片段是的，我已经考虑过了，但是对于我有一百个myDiv的框架来说，这太复杂了，包括他们各自other@alexino2如果您想允许任意属性，它是唯一的选项。parseTree或多或少是我用来将其转换为html的工具，但使用“attributes:{}”这一事实当然会让事情变得安全，但并不简单……现在的图像是p1.p2.myDiv.attributes.style=“”。。。比p1.p2.myDiv.style=“”@Oriol更复杂，但op要求从json加载