Create a DOM element from template string using DOMParser

element.js

// 1 April 2020
// variant on jsx in vanilla.js
// see https://gist.github.com/dfkaye/f3229e5ace79b6873022987f160c7b61
// takes a template string and mimeType
// returns dom element from the template string

// TODO (maybe) - add UI map capability - i.e. UI = { name: <node with var=name> }

function element(template, mimeType) {
  return (new DOMParser)
    .parseFromString(template, mimeType)
    .body
    .firstElementChild;
}

/* test it out */

var t = `
<div class="repository">
 <div var="name"></div>
 <p var="text"></p>
 <img var="image"/>
</div>
`;

var test = element(t, "text/html")

console.log(test);

/*
<div class="repository">
 <div var="name"></div>
 <p var="text"></p>
 <img var="image"/>
</div>
 */
 
// Helpers based on MDN table at bottom...

function toHtml(template) {
  return element(template, "text/html")
}

function toXml(template) {
  return element(template, "text/xml")
}

function toSvg(template) {
  return element(template, "image/svg+xml")
}

/*
[https://developer.mozilla.org/en-US/docs/Web/API/DOMParser]

| mimeType | doc.constructor |
| --- | --- |
| text/html	| Document |
| text/xml|	XMLDocument |
| application/xml	| XMLDocument |
| application/xhtml+xml	| XMLDocument |
| image/svg+xml	| XMLDocument |
 */