el.js - Element/Node creation tool | Hacker News Reader

el.js - Element/Node creation tool

github.com

30 pointsmarkyg22 comments

A simple node/element creation tool. Native JS without any library dependencies.

I think creating nodes in javascript is a nogo, keep your html in your templates and just read the templates from js and there you can refer to nodes to do whatever you want in js.

But as always there are exceptions to the rule, and then this lib may come in handy.

I've got a browser based notepad using local storage as the key:value store. I needed a way to 'open notes' and in turn create various tabs, etc.

HTML wasn't an option in something so dynamic.

I guess all I'm saying is, there are use-cases where it's fine

Yeah indeed.

Another option would be to use something like mustache and precomile your templates to javascript functions which you could use.

Why is it a "no go"?

Basically html = view, javascript = logic. Following from separation-of-concerns, you want to decouple the two.

You can still separate your view and logic in pure Javascript, too.

It would be really nice if the script would adopt the emmet/zencoding syntax for writing html elements. There probably already is a js library that does this although I can't seem to find it :)

http://docs.emmet.io/abbreviations/

Noob question here. Does it escape content? I find that incredibly important but I don't see it mentioned anywhere.

And what about the alternatives? Yesterday (in the "The DOM isn't slow. You are." article) there was a talk about laconic and crel. Do those escape content?

Laconic does [1], this library does not [2]. Laconic uses createTextNode, this uses innerHTML.

[1]: https://github.com/joestelmach/laconic/blob/master/laconic.j...

[2]: https://github.com/markgandolfo/el.js/blob/master/el.js#L48

By the way, HTML encoding is fairly simple, you just have to be sure you get it right. This is a function for it that I include in most projects where I don't already have something like jQuery or laconic: https://gist.github.com/jrajav/5204669

I've only recently started to dabble with javascript and its pitfalls such as XSS attacks. Using jQuery was the only solution I found to escape user generated and that gist will come in handy when I don't want to depend on that framework. Thank you for that.

crel uses createTextNode, so yes.

This reminds me of a similar tool in php https://github.com/yuanchuan/html-tag-printer

Or... you could stop trying to be Mr. Fancypants and just write HTML.

For almost 20 years now I've seen projects like this come and go. They go because they're worthless. They might seem helpful (hey! we can use one language to do everything!) but in reality they break the cardinal rule of not using the right tool for the job.

Why not just use Domo? https://github.com/jed/domo

This looks like a straight-up copy of laconic, which is already used by many (including my team): https://github.com/joestelmach/laconic

It even hijacks the 'el' naming convention for it.

el was shorthand for element. I wasn't aware of laconic until after I wrote this... I'm simply learning javascript and thought this would be a nice way to do it..

Apologies, I shouldn't have leaped to conclusions. However, from what I can see it is very similar as laconic, from the interface to the implementation. Laconic also has the advantage of most tags being predefined as methods, and a much longer burn-in and maturity. Not to detract from your efforts, but I'd probably recommend most people go with that if they're looking for something to rely on for practical use right now.

Keep at it, though! Maybe you can find a way to improve laconic, or to differentiate your own library. It's fun and a good way to learn, regardless.

I'm always glad to see people creating HTML in JS in a sane way.

That said, I think the API could be a little less verbose, but then I'm biased towards https://github.com/KoryNunn/crel :P

There's a similar routine which has some jQuery selector syntax resemblence: https://github.com/blacktaxi/dollar-gee

Good to know about dollar-gee, reminds me of DOMBrew: https://github.com/glebm/DOMBrew

I found this approach interesting too: http://aakilfernandes.com/uiji.html

A reverse jQuery of sorts

Thanks for that! It looked interesting but I threw an exception at the second example so now I'm back here.

Reply on news.ycombinator.com