innerHTML-vs-createElement (v12)

(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() {
	container.replaceChildren();
 var c = document.createElement('div'),
     d = document.createElement('ul'),
     e = document.createElement('li'),
     f = document.createElement('li'),
     g = document.createElement('li'),
     h = document.createElement('ul'),
     i = document.createElement('li'),
     j = document.createElement('em'),
     k = document.createElement('li'),
     l = document.createElement('em'),
     m = document.createElement('li'),
     n = document.createTextNode('Some content'),
     o = document.createTextNode('Some other content'),
     p = document.createComment('Some comment'),
     q = document.createTextNode('Some '),
     r = document.createTextNode('more'),
     s = document.createTextNode(' content'),
     t = document.createTextNode('Some other '),
     u = document.createTextNode('more'),
     v = document.createTextNode(' content'),
     w = document.createComment('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);
})();