JS HTML5 — как вставить переменные?

Question

[kuronokey]

День добрый.
Подскажите, пожалуйста как в этой замечательной технологии реализовать вставку переменных.

Есть html5 )) тег - там всё здорово.

<template id="tpl">
<div>**counter**</div>
      <img class="infinitimg" src="img/**counter**.png">
  </template>

Берём его, вставляем в html и всё работает. Но как сделать что бы можно было в JS коде вставлять переменные в эти шаблоны? Как сделать что бы **counter** в цикле менялся. Это что нужно по всем нодам проходить и искать там **counter**, что бы replace сделать? Есть ли метод попроще. Это вроде как шаблоны же

Comments

[dollar]

Отметьте решениями ответы на предыдущие вопросы.
Чтобы не казалось со стороны, что вы и на этот вопрос забьете.

Answer 1

[Алексей Ярков]

Можете, например, использовать https://lodash.com/docs/4.17.11#template

const compiled = _.template(`<div><%= counter %></div>
 <img class="infinitimg" src="img/<%= counter %>.png">`);
compiled({ 'counter': 1 });
// => '<div>1</div><img class="infinitimg" src="img/1.png">'