var htmlTemplateToDom = require('html-template-to-dom');
document.body.appendChild(htmlTemplateToDom(document, '<p class="${ class }">${ data } ${ otherContent }</p>', {
class: 'foo bar',
data: "Inserted content",
otherContent: document.createElement('span')
}));
// Following content got appended to document body:
// <p class="foo bar">Inserted content <span></span></p>
As example presents inserts are resolved at DOM level, so DOM (or other objects that resolve to DOM) can also be used as inserts, and they'll be inserted in direct form.
$ npm install html-template-to-dom
var htmlTemplateToDom = require('html-template-to-dom');
var dom = htmlTemplateToDom(document, '<p class="${ class }">${ data }</p>', {
class: 'foo bar',
data: "Inserted content"
});
Converts provided html
to DOM (owned by document
). Options are described under domFromResolvedTokens section.
- In HTML string ES6 template inserts are replaced with markers (control characters).
- HTML is resolved to DOM
- Result DOM tree is iterated, and all found insert markers are replaced with actual inserts
- Eventual
script
elements are converted to ones that will be evaluated by engine when inserted into document (by default Browser doesn't evaluate scripts injected via innerHTML)
var domFromResolvedTokens = require('html-template-to-dom/from-resolved-tokens');
var dom = domFromResolvedTokens(document, ['<p class="', 'foo bar', '">', "Inserted content", '</p>']);
Resolves already resolved tokens, into DOM. It's a low-level resolver used internally by main module, which can used directly by external utilities which need better control of resolution process.
- normalizeHtml - Additional HTML resolver. If provided, it's used after ES6 templates inserts are removed, but before DOM is resolved (between 1 and 2 step of resolution flow).
- normalizeDomBeforeInserts - Additional DOM resolver. If provided, it's used after DOM is resolved but before inserts are put in (between 2 and 3 step of resolution flow).
- normalizeDomAfterInserts - Additional DOM resolver. If provided, it's used after inserts are put in (between 3 and 4 step of resolution flow).
$ npm test