innerHTML-vs-createElement

(function() {
 container.innerHTML = '<div id="some-id"><ul class="some-class"><li class="one">Some content</li><li class="two">Some other content</li><li class="three"><!-- Some comment --></li></ul><ul class="some-other-class"><li class="four">Some <em>more</em> content</li><li id="some-other-id" class="five">Some other <em>more</em> content</li><li class="six"><!-- Some more comment --></li></ul></div>';
})();

(function() {
 var $ = document.createElement,
     a = document.createTextNode,
     b = document.createComment,
     c = $('div'),
     d = $('ul'),
     e = $('li'),
     f = $('li'),
     g = $('li'),
     h = $('ul'),
     i = $('li'),
     j = $('em'),
     k = $('li'),
     l = $('em'),
     m = $('li'),
     n = a('Some content'),
     o = a('Some other content'),
     p = b('Some comment'),
     q = a('Some '),
     r = a('more'),
     s = a(' content'),
     t = a('Some other '),
     u = a('more'),
     v = a(' content'),
     w = b('Some more comment'),
     x = 'className',
     y = 'appendChild';
 c.id = 'some-id';
 d[x] = 'some-class';
 e[x] = 'one';
 f[x] = 'two';
 g[x] = 'three';
 h[x] = 'some-other-class';
 i[x] = 'four';
 k.id = 'some-other-id';
 k[x] = 'five';
 j[x] = 'id';
 j[y](r);
 m[y](u);
 e[y](n);
 f[y](o);
 g[y](p);
 i[y](q);
 i[y](j);
 i[y](s);
 k[y](t);
 k[y](l);
 k[y](v);
 m[y](w);
 d[y](e);
 d[y](f);
 d[y](g);
 h[y](i);
 h[y](k);
 h[y](m);
 c[y](d);
 c[y](h);
 container[y](c);
})();