Как вставить html в методами js, храня этот html в отдельном файле templates?

Question

[Kery]

Нужно что б по нажатию на соответсвующюю кнопку в #box добавлялся соответствующий html контент.

сейчас это реализовано так:

$("#box").append("<div class='headline'><input type='text' placeholder='Заголовок' class='head'></div>");

Есть много таких дивов которые надо вставлять по нажатию на соответствующие кнопки. Хотелось бы не нагружать js и описать эти дивы где то в другом файле template. Что б добавление выглядело так

$("#box").добавить(headline);

где headline в другом файле

var headline = "<div class='headline'><input type='text' placeholder='Заголовок' class='head'></div>"

Comments

[Илья Савиных]

Может будет актуально)

var block = '';
    fetch('/templates.html', {method: 'GET'})
          .then(txt => txt.text())
          .then(html => block = html);
    setTimeout(()=>{
        document.querySelector('#box').append(block);
    },5000)

Answer 1

[Николай Елисеев]

Вот так:
$( "#box" ).load( "ajax/test.html" );

Опции: api.jquery.com/load/

Answer 2

[bmkobzar]

когда я только начинал вникать в фронт-енд, у меня возникла похожая ситуация. 4 года назад я выбрал такой подход:

<div id="headline1" style="display:none">
мой текст 1
</div>
<div id="headline2" style="display:none">
мой текст 2
</div>
<div id="headline3" style="display:none">
мой текст 3
</div>

...

<div id="box"><div>

...

<a href="#" onclick="setHeadline(); return false;">кнопка 1</a>
<a href="#" onclick="setHeadline(2); return false;">кнопка 2</a>
<a href="#" onclick="setHeadline(3); return false;">кнопка 3</a>

function setHeadline(num){
num = num || 1;
$("#box").html($('#headline'+num).html());
}

на оптимальность не претендую, ибо чисто концепт.

Answer 3

[soaserele]

Поиском на хабре можно найти кучу статей по поводу шаблонов (template)... вот один из них:
habrahabr.ru/post/112843/

Answer 4

[Виталий Желтяков]

Чисто через JS нельзя - запрещено политикой безопасности. Только с использованием сервера и AJAX (см. комментарий выше)

Answer 5

[Walt Disney]

Вы же сами фактически написали решение
так и сделайте

создайте js файл вида:

var headline1 = '<div>...</div>'
var headline2 = '<div>...</div>'
var headline3 = '<div>...</div>'

подключите его к ващей страниц:
<script src="template.js"></script>

И используйте:
$("#box").append(headline1);

Answer 6

[Damir Makhmutov]

Добро пожаловать в коллекцию bad practices

Answer 7

[sergealmazov]

Почитай про HTML Imports