What is the best way to create blocks from data?

Question

JavaScript

There is this HTML:

<template id="ctmp">
  <div>
    .........Куча дочерних и вложенных в них элементов.......
  </div>
</template>
<div id="dump">
  <!--Блок для вывода-->
</div>

I receive JSON data - text, titles, links, in general, I process all this like this:

var cloneNode = $(ctmp.content.children[0]);
//Получил json
var newBox = document.createDocumentFragment();
json.forEach(function(article){
  var newArticle = cloneNode.clone();
  cloneNode.find(".contentBox").text(article.text);
  cloneNode.find(".contentTitle").text(article.name);
  //И примерно 10 подобных манипуляций
  newBox.appendChild(cloneNode);
}
dump.appendChild(newBox);

In general, it takes 500-700ms to enumerate and create 50 new blocks, I won’t say that this is a lot, I’m interested in something else - is my approach correct? Maybe you organize these things in a simpler way? For example, you work not with an element, but with HTML code and simply replace the necessary parts with replace?

Answer 1

Use a templating engine, the best way to turn JSON data into HTML, as optimized as possible.
- Handlebars.js
- Dust.js