Где хранить HTML и CSS для JS?

Question

[Muhammad]

К примеру, есть bootstrap алерт:

<div class="alert alert-success" role="alert">...</div>

и еще несколько стилей к нему. Мне нужно на чистом JS (без использования шаблонизаторов) при нажатии на кнопку добавлять их к какому либо блоку. Как будет лучше хранить эти участки кода? Правилен ли такой вариант:

<script id="entry-template" type="template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

И как будет лучше производить замену на нужные мне значения?

Answer 1

[Денис Инешин]

Ну если вы уж так сильно хотите обойтись без шаблонизатора, то можно сделать так: jsfiddle.net/ph2xnbfv/1

var html =
    '<div class="entry">' +
    '<h1>{{title}}</h1>' +
    '<div class="body">' +
    '{{body}}' +
    '</div>' +
    '</div>';

var title = "Vasya";
var body = "Pupkin";

var result = html.replace("{{title}}", title);
result = result.replace("{{body}}", body);

console.log(result);

Comments

[Muhammad]

А разве правильно писать HTML в JS?

[Денис Инешин]

Muhammad: вообще-то не рекомендуется, для того и существуют шаблонизаторы

[Muhammad]

Денис Инешин: ок, понял )

Answer 2

[Александр Петров]

Позволю себе спросить: а почему вы не хотите использовать шаблонизаторы?
Просто вы приводите в пример разметку в скрипте — это уже начало использования шаблонизаторов :)
Если вас смущает вес шаблонизаторов, но вам не нужна логика в шаблонах (а нужно просто заменить значения), то можно использовать что-то очень легковесно: https://github.com/felixexter/tmpl.js

var html = $('#entry-template').html().tmpl({
  title: 'My title',
  body: 'My body'
})

Дальше уже вставляете куда надо.

Comments

[Muhammad]

Да, немного ступил. Реализовал на Handlebars