A little bit of plain JavaScript can do a lot

Re:A little bit of plain JavaScript can do a lot by pcr910303 on Sunday June 21, 2020 @04:47AM (#23590750)

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 :-)

[ Parent | on HN ]

Re:A little bit of plain JavaScript can do a lot by wolfgang42 on Sunday June 21, 2020 @12:57PM (#23593268)

I 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.

[ Parent | on HN ]

Re:A little bit of plain JavaScript can do a lot by PetahNZ on Sunday June 21, 2020 @06:47AM (#23591250)

Isn't clarity better than bytes. We can always running through a minifier at build time.

[ Parent | on HN ]

Re:A little bit of plain JavaScript can do a lot by pcr910303 on Sunday June 21, 2020 @06:52AM (#23591281)

A 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.

[ Parent | on HN ]

Re:A little bit of plain JavaScript can do a lot by yunruse on Sunday June 21, 2020 @10:23AM (#23592170)

Clarity 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.

[ Parent | on HN ]