templator.js

function tag( type, attrs ) {
  attrs = attrs || {};
  return function tagTemplate( content ) {
    return [
      startTag( type, attrs ),
      content,
      endTag( type )
    ].join(' ');
  }
}

function startTag( type, attrs ) {
  return [
    '<' + type,
    stringifyAttrs( attrs ) + '>'
  ].join(' ');
}

function endTag( type ) {
  return '</' + type + '>';
}

function stringifyAttrs( attrs ) {
  return Object.keys( attrs )
    .map( function attributeString ( attr ) {
      return attr + '="' + attrs[ attr ] + '"';
    })
    .join(' ');
}


/* Templator usage example */

function renderEmployeeList( employee ) {
  var skillList = employee.skills
    .map( tag( 'span', { class: 'semi-bold' } ) )
    .map( tag( 'li', { class: 'skill-item' } ) )
    .join( '\n' );
  return [
    tag( 'h1', { class: 'employee', id: employee.id } )( employee.name ),
    tag( 'ul', { class: 'skill-list' } )( skillList ),
    tag( 'p', { class: 'salary' } )( 'Salary is: ' + employee.salary )
  ].join( '\n' );
}

renderEmployeeList({
  id: 'RZT42',
  name: "Sandeep",
  skills: [ "Java", "Javascript", "Angular", "Spark", "Cassandra" ],
  experience: 2,
  salary: 100
});

/** Result:
<h1 class="employee" id="RZT42"> Sandeep </h1>
<ul class="skill-list"> <li class="skill-item"> <span class="semi-bold"> Java </span> </li>
<li class="skill-item"> <span class="semi-bold"> Javascript </span> </li>
<li class="skill-item"> <span class="semi-bold"> Angular </span> </li>
<li class="skill-item"> <span class="semi-bold"> Spark </span> </li>
<li class="skill-item"> <span class="semi-bold"> Cassandra </span> </li> </ul>
<p class="salary"> Salary is: 100 </p>
*/

Here's the ES6 version of the Templator

const tag = (type = 'div') => (attrs = {}) => (content = '') => 
    `${startTag(type)(attrs)} ${content} ${endTag(type)}`;

const startTag = type => attrs => `<${type} ${stringifyAttrs(attrs)}>`

const endTag = type => `</${type}>`;

const stringifyAttrs = attrs => Object.keys( attrs )
    .map( attr => `${attr}="${attrs[attr]}"` )
    .join(' ');

Here's an example usage

let h1 = tag('h1');
let mainH1 = h1({ class: 'main' });
let secondaryH1 = h1({ class: 'secondary', style: 'color: red;' });

let HTML = tag('div')({})(`
    ${mainH1('This is main')}
    ${secondaryH1('This is secondary')}
`);

which would yield:

<div >
    <h1 class="main">This is main</h1>
    <h1 class="secondary" style="color: red;">This is secondary</h1>
</div>