# Ways of generating HTML & DOM elements in the browser (in JS, especially)

**URL:** <https://forum.kirupa.com/t/ways-of-generating-html-dom-elements-in-the-browser-in-js-especially/331446>\
**Category:** web dev\
**Created:** [August 2, 2013, 1:35pm UTC](https://forum.kirupa.com/t/ways-of-generating-html-dom-elements-in-the-browser-in-js-especially/331446 "2013-08-02T13:35:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [August 2, 2013, 1:35pm UTC](https://forum.kirupa.com/t/ways-of-generating-html-dom-elements-in-the-browser-in-js-especially/331446/1 "2013-08-02T13:35:20Z")

</div>

How do people like to generate the ever-changing structure of their web applications these days?

I ask because I was recently considering and trying out AngularJS, since it’s billed as one of the most modern ways to make single-page-as-whole-application web apps. However, I ended up tentatively deciding that it was too messy to use.

The approaches, frameworks, libraries, and tools that come to the top of my mind immediately are these:

[LIST]  
[_]Generate raw HTML strings with vanilla JS.  
[_][w]XSLT[/w] (pretty old).  
[_]AngularJS (JS + mustache-style templating)  
[_]jQuery (or similar. Library sugar for generating DOM elements.)  
[/LIST]

Personally, I particularly don’t like templating systems that don’t stray much from being simple string concatenation. This is especially troublesome in a JS app, because JS doesn’t have multiline string literals. Take this example from the main landing page for AngularJS:

```auto
angular.module('components', []).
  directive('tabs', function() {
    return {
      template:
        '<div class="tabbable">' +
          '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
              '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
          '</ul>' +
          '<div class="tab-content" ng-transclude></div>' +
        '</div>',
    };
  })
})

```

Maybe the most obviously annoying thing is the trailing pluses and unhighlighted HTML hidden in string literals. But there are also some handlebar/mustache/whatever brackets that do _more_ concatenation. Then there’s some weird invented syntax for declaring a variable during iteration. And the pseudo-namespace.

Other approaches have different pitfalls, though I can’t list them all.

Anyway, I haven’t found an approach that I’m particularly happy with, and want to know what you favor when building your own stuff.