How do browser-side javascript template engines render templates?

Question

I found a large number of browser-side JavaScript templates which render a template with data values a string. However, I'm a bit uncertain how this string is supposed to be translated to display elements in the DOM.

Obviously, one way is just document.write - but I think that has been long buried since.

Another is using element.innerHTML, but atleast some years ago this was not part of any standard, and it didn't work for XHTML-documents.

So, what's the deal nowadays? Is .innerHTML the one to use and that works perfectly for XHTML and is a part of a standard? Or do people just use it and it works? Or is there something else that is supported?

As an aside, PURE.js seems to be all about building templates out of DOM-elements, which seems pretty attractive to me - are there any other template engines which work the same way?

Answer 1

innerHTML works pretty much everywhere.

These methods are also useful for working with the DOM which is basically what a template engine needs to do:

• createElement
• appendChild
• createTextNode
• removeChild
• parentNode

libraries like jQuery make extensive use of these.