JSONからDOMを作りたくなったんで、DOMMakerを使ってみたらStyleが効かないんでちょっと直した。

以前、404 Blog Not Found:javascript - json2dom() & dom2json()で読んだネタを思い出して、使ってみた。

いやー、普通にネストとかもしてくれて、テーブルタグとかも作ってくれる。よくできている。流石。

んでも、

1. attributeにonclickとかも載せたい（んー、よく考えたら、idで後付けの方がぽいかな）
2. I.Eだと、styleのattributeが効かない

ので、修正してみた。

(function(){
json2dom = function(json){
    var i = 0;
    var tag = json[i++]
    var dom = document.createElement(tag);
    if (json[i].constructor == Object){
        var attr = json[i];
        for (var name in attr){
            if (attr[name].constructor == Function){
                dom[name] = attr[name];
            }
            else {
                if (document.all && name=="style"){
                    dom.style.cssText = attr[name];
                }
                else {
                    dom.setAttribute(name, attr[name]);
                }
            }
        } 
    }
    i++;
    for (var l = json.length; i < l; i++){
        dom.appendChild(
            json[i].constructor == Array 
                ? arguments.callee(json[i])
                : document.createTextNode(json[i])
            );              
    }
    return dom;
}
})();

I.Eでテーブルが出ないじゃーんとか思ってたんだけど、I.Eはちゃんと<tbody>を入れないとダメなんね。

追記 （2013/01/09）

createTextNode()に不満があったので・・・・。あとClass名をIE用に。
判定にprorotype.js使ってるけど。

(function(){
  json2dom = function(json)
  {
      var i = 0;
      var tag = json[i++];
      var dom = document.createElement(tag);
      if (json[i] && json[i].constructor == Object){
          var attr = json[i++];
          for (var name in attr){
              if (name == "class" && Prototype.Browser.IE && dom.getAttribute("className")!==null){
                  dom.setAttribute("className", attr[name]);
              }
              else if (name=="style" && Prototype.Browser.IE){
                  dom.style.cssText = attr[name];
              }
              else {
                  dom.setAttribute(name, attr[name]);
              }              
          }
      }
      for (var l = json.length; i < l; i++){
          if (dom.appendChild){
              if (json[i]){
                  if (json[i].constructor == Array){
                      dom.appendChild(arguments.callee(json[i]));
                  } else {
                      dom.innerHTML = json[i];
                  }
              }
          }
      }
      return dom;
  }

})();