I want to share my small library. It is interesting to hear your opinion about her.

Right to the point: htmlmake is a js function that allows you to create a line with html markup inside for further insertion into the DOM tree.

Why use this?

I'll start a little from afar. I would conditionally divide modern web development into 2 categories:

• Sites in which html is generated by the server, and javascript is used mainly for animations and ajax requests (hereinafter I will call them “sites”);
• One-page applications in which js takes care of the entire DOM rendering (hereinafter referred to as “web applications”).

If we talk about web applications, then it’s logical to distribute js templating engines for generating html (for example, Jade). My library is designed for 1 group, in which the component approach to writing js is most common. When introducing a js template engine to generate a simple set of html elements is too expensive, usually html is generated by its jquery code. Let's say we need to compile the following html:

Привет, Хабр!

Then usually we write something like this:

$(“
”).addClass(“wrapper”).append($(
).html(“Привет, Хабр!”))

Or like this:

$(“
Привет, Хабр!
”)

And, in my opinion, such code is difficult to read and maintain. Here is an example of using my function:

htmlString = htmlmake ->
  @div "wrapper", ->
    @h1 "Привет, Хабр!"

Why are all the examples on coffeescript?

Nested functions are written too long on native js, so immediately I do not recommend using this function for those who do not use coffeescript.

Here is an example a bit more complicated:

 html = htmlmake ->
    @div "hello-class", ->
      @ul ->
        @li "one"
        @li "two"
        @li "three"
      @a href: "http://google.com", "underworld!"

The interface is designed as light as possible. It’s immediately clear which html will be generated. Result:

one
two
three
underworld

And if I want my this?

It often happens that we need to forward context to handlers. Fortunately, in coffescript this is done with a minimum of effort. But in this case, we lose the methods that generate dom elements, so an input parameter was provided in all callbacks. Here is an example:

@hello = "superman"
html = htmlmake (hm)=>
  hm.span id: "super", @hello

Result:

superman

An example is more complicated:

@names = ["Katarina", "Diana", "Alistar"]
  html = htmlmake (m)=>
    m.div "names", (m)=>
      m.ul (m)=>
        for name in @names
          m.li name

Result:

Katarina
Diana
Alistar

Thanks for attention! I will be glad to hear your criticism / advice / suggestions.

Link to the repository , well, or bower install html-maker.