render example

renderExample.js

data = {
  name: 'John',
  age: 20,
  items: [
    { id: 0, name: 'a' },
    { id: 1, name: 'b' },
    { id: 2, name: 'c' },
  ]
};

blockTemplate = '' + 
'<div>' +
  '<div class="name">{name}</div>' +
  '<div class="age">{age}</div>' +
  '<div class="items">' +
    '{items}' +
  '</div>' +
'</div>';

itemTemplate = '' + 
'<div>' +
  '<div class="itemId">{id}</div>' +
  '<div class="itemName">{name}</div>' +
'</div>';

getInnerHTML = function() {
  items = data.items.map(function(item) {
    return itemTemplate
      .replace(/{id}/g, item.id)
      .replace(/{name}/g, item.name);
  }).join();

  return blockTemplate
    .replace(/{name}/g, data.name)
    .replace(/{age}/g, data.age)
    .replace(/{items}/g, items);
};

document.querySelector('#myElement').innerHTML = getInnerHTML();