

el.js - Element/Node creation tool - markyg
https://github.com/markgandolfo/el.js
A simple node/element creation tool. Native JS without any library dependencies.
======
TeeWEE
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.

~~~
markyg
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

~~~
TeeWEE
Yeah indeed.

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

------
risratorn
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/>

------
glitchdout
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?

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

[1]:
[https://github.com/joestelmach/laconic/blob/master/laconic.j...](https://github.com/joestelmach/laconic/blob/master/laconic.js#L71)

[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>

~~~
glitchdout
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.

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

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

------
DanielRibeiro
Why not just use Domo? <https://github.com/jed/domo>

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

~~~
markyg
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..

~~~
jrajav
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.

------
korynunn
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

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

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

------
hilko
I found this approach interesting too: <http://aakilfernandes.com/uiji.html>

A reverse jQuery of sorts

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

