4 ms·
A bit more minified/modern version of this that I'm using: function $e(t='div',p={},c=[]){ let el=document.createElement(t); Object.assign(el,p
by pcr910303 6y ago
A bit more minified/modern version of this that I'm using:
function $e(t='div',p={},c=[]){
let el=document.createElement(t);
Object.assign(el,p);
el.append(...c);
return el;
}
var $t=document.createTextNode.bind(document);
That's 173 bytes not minified, might be useful for someone.
Interestingly, the function names are exactly the same - I guess people think similarly :-)
- PetahNZ 6y agoIsn't clarity better than bytes. We can always running through a minifier at build time.
- pcr910303 6y agoA minifier is better, but I find that snippet of code clear enough for personal use (el is element, t is tag, p is props, and c is children). The small bytes also mean that for simple sites I can just copy paste it before transitioning to a real setup.
- yunruse 6y agoClarity is only useful when the variable scope is complicated, which it isn’t here. The problem COULD be that the ultra-short variable names make an unclear external API… but given the function is internal, the context of its use would make it rather obvious it’s constructing HTML elements. You’re not wrong about clarity; it wouldn’t hurt here at all, but it wouldn’t hinder without, so I imagine it’s to reduce cognitive load and make it abundantly clear the function is logicless glue.
- wolfgang42 6y agoI like how short yours is—I really must use Object.assign() more. I hadn’t heard about append(); since my original version supported IE it had to use appendChild() in a loop and I never realized there was a better option. It looks like append() also accepts strings directly. This eliminates the need for $T, which makes things even nicer.