createElement で大量にノードを書くのは面倒。

書いてみたら、結局ノードやアートリビュートのリストを書くのが面倒だった。
関数が返す node に、付け加える場合は、node.firstChild に。
className の指定は class に。
ipodopera で使用する時は、"nodename": "tbody" のように。


ノードを組み立てる時に、短くなればと思ったのに、意外に短くならない!


再帰は便利)。

function createElementsEX () {
  var doc = document;
  var result = doc.createDocumentFragment ();
  var len = arguments.length;
  var idx = 0;
  var arg;
  var name;
  var node;
  
  if (1 > len)
    return null;
  
  for (; idx < len; idx++) {
    arg = arguments[idx];

    if ('string' ===  typeof arg)
      result.appendChild (doc.createTextNode (arg));

    else if (arg instanceof Array)
      for (var i = 0; i < arg.length; i++)
        result.appendChild (arguments.callee (arg[i]));

    else if (arg instanceof Object) {
      if (name = arg.nodeName) {
        node = doc.createElement (name);
        if (! node)
          throw new Error;
        for (var i in arg)
          if (arg.hasOwnProperty (i))
            if ('nodeName' !== i && 'childNodes' !== i)
              node.setAttribute (i, arg[i]);

        if ('childNodes' in arg)
          node.appendChild (arguments.callee (arg.childNodes));

        result.appendChild (node);
      }
      else
        result.appendChild (arguments.callee (arg.text || ''));
    }
  }
  return result;
}

var table = {
  nodeName   : 'table',
  border     : 1,
  childNodes : [
    { 
      nodeName : 'caption',
      childNodes : 'キャプション'
    },
    { 
      nodeName : 'thead',
      childNodes : [
        { 
          nodeName : 'th',
          childNodes : 'name'
        },
        {
          nodeName : 'th',
          childNodes : 'telephone'
        }
      ]
    },
    {
      nodeName : 'tbody',
      childNodes : [
        {
          nodeName : 'th',
          childNodes : 'abc def'
        },
        {
          nodeName : 'td',
          childNodes : '01-234-5678'
        }
      ]
    }
  ]
};

var node = createElementsEX (table);

document.body.appendChild (node);