У мене є масив, через який я переглядаю. Щоразу, коли умова виконується, я хочу додати копію HTMLкоду нижче до елемента контейнера з деякими значеннями.

Де я можу розмістити цей HTML для повторного використання розумним способом?

<a href="#" class="list-group-item">
    <div class="image">
         <img src="" />
    </div>
    <p class="list-group-item-text"></p>
</a>

JQuery

$('.search').keyup(function() {
    $('.list-items').html(null);

    $.each(items, function(index) {
        // APPENDING CODE HERE
    });
});

Ви можете вирішити використовувати двигун-шаблон у своєму проекті, наприклад:

• вуса
• underscore.js
• руль

Якщо ви не хочете включати іншу бібліотеку, John Resig пропонує рішення jQuery , подібне до наведеного нижче.

Веб-переглядачі та читачі екранів ігнорують нерозпізнані типи сценаріїв:

<script id="hidden-template" type="text/x-custom-template">
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    <tr>
</script>

Використовуючи jQuery, додавання рядків на основі шаблону буде нагадувати:

var template = $('#hidden-template').html();

$('button.addRow').click(function() {
    $('#targetTable').append(template);
});

Старе запитання, але оскільки в цьому питанні задається "використання jQuery", я подумав, що я б запропонував варіант, який дозволяє це робити, не вводячи жодної залежності від постачальника.

Незважаючи на те, що там є багато двигунів-шаблонів, багато їхніх функцій останнім часом припали до зневаги: ​​ітерація ( <% for), conditionals ( <% if) та перетворення ( <%= myString | uppercase %>) розглядаються як мікроязик у кращому випадку та анти-шаблони в гіршому випадку. Сучасні практики шаблонування заохочують просто відображати об’єкт до його DOM (або іншого) подання, наприклад, те, що ми бачимо із властивостями, відображеними на компоненти в ReactJS (особливо компоненти без стану).

Шаблони всередині HTML

Одне властивість, на яке можна покластися, зберігаючи HTML для вашого шаблону поруч із рештою HTML, - це за допомогою невиконання <script> type, наприклад <script type="text/template">. Для вашого випадку:

<script type="text/template" data-template="listitem">
    <a href="${url}" class="list-group-item">
        <table>
            <tr>
                <td><img src="${img}"></td>
                <td><p class="list-group-item-text">${title}</p></td>
            </tr>
        </table>
    </a>
</script>

Під час завантаження документа прочитайте ваш шаблон і позначте його за допомогою простого String#split

var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);

Зауважте, що за допомогою нашого маркера ви отримуєте його у змінному [text, property, text, property]форматі. Це дозволяє нам красиво відобразити його за допомогою Array#mapфункції картографування:

function render(props) {
  return function(tok, i) { return (i % 2) ? props[tok] : tok; };
}

Де propsмогло б виглядати { url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' }.

Збираючи все це, припускаючи, що ви проаналізували та завантажили ваш, itemTplяк було зазначено вище, і у вас є itemsмасив у масштабі:

$('.search').keyup(function () {
  $('.list-items').append(items.map(function (item) {
    return itemTpl.map(render(item)).join('');
  }));
});

Цей підхід також лише ледве jQuery - ви повинні мати можливість використовувати той же підхід, використовуючи ванільний javascript з document.querySelectorі .innerHTML.

jsfiddle

Шаблони всередині JS

Питання, яке потрібно задати собі, таке: чи дійсно ви хочете / потрібно визначати шаблони як HTML-файли? Ви завжди можете компонентизувати + повторно використовувати шаблон так само, як і повторно використовувати більшість речей, які хочете повторити: за допомогою функції.

У програмі es7-land, використовуючи руйнування, рядки шаблонів та стрілочні функції, ви можете записати прямо-таки красиві компоненти компонентів, які легко завантажуються за допомогою $.fn.htmlвищевказаного методу.

const Item = ({ url, img, title }) => `
  <a href="${url}" class="list-group-item">
    <div class="image">
      <img src="${img}" />
    </div>
    <p class="list-group-item-text">${title}</p>
  </a>
`;

Тоді ви зможете легко його відтворити, навіть зіставивши з масиву, як-от так:

$('.list-items').html([
  { url: '/foo', img: 'foo.png', title: 'Foo item' },
  { url: '/bar', img: 'bar.png', title: 'Bar item' },
].map(Item).join(''));

О та остаточне зауваження: не забудьте очистити свої властивості, передані шаблону, якщо вони прочитані з БД, або хтось міг передати HTML (а потім запустити сценарії тощо) зі своєї сторінки.

Використовуйте замість шаблону HTML!

Оскільки прийнята відповідь буде представляти собою метод перезавантаження сценарію, я хотів би запропонувати інший, який, на мій погляд, набагато чистіший і безпечніший через ризики XSS, що виникають із сценаріями перевантаження.

Я створив демонстрацію, щоб показати вам, як використовувати його в дії та як вставити один шаблон в інший, відредагувати та додати в документ DOM.

приклад html

<template id="mytemplate">
  <style>
     .image{
        width: 100%;
        height: auto;
     }
  </style>
  <a href="#" class="list-group-item">
    <div class="image">
      <img src="" />
    </div>
    <p class="list-group-item-text"></p>
  </a>
</template>

приклад js

// select
var t = document.querySelector('#mytemplate');

// set
t.content.querySelector('img').src = 'demo.png';
t.content.querySelector('p').textContent= 'demo text';

// add to document DOM
var clone = document.importNode(t.content, true); // where true means deep copy
document.body.appendChild(clone);

HTML <шаблон>

• + Його вміст ефективно інертний до активації. По суті, ваша розмітка є прихованою DOM і не відображається.

• + Будь-який вміст у шаблоні не матиме побічних ефектів. Сценарії не запускаються, зображення не завантажуються, аудіо не відтворюється ..., поки шаблон не буде використаний.

• + Вміст вважається відсутнім у документі. Використання document.getElementById()або querySelector()на головній сторінці не повертає дочірні вузли шаблону.

• + Шаблони можуть бути розміщені в будь-якому місці всередині <head>, <body>або <frameset>і може містити будь-який тип контенту , який дозволений в цих елементах. Зауважте, що "будь-де" означає, що його <template>можна безпечно використовувати в місцях, які HTML-аналізатор забороняє.

Відступати

Підтримка веб-переглядача не повинна бути проблемою, але якщо ви хочете охопити всі можливості, ви можете легко перевірити:

Щоб визначити функцію <template>, створіть елемент DOM і перевірте, чи існує властивість .content:

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}

Деякі відомості про метод перевантаження сценарію

• + Нічого не надається - браузер не рендерує цей блок, оскільки <script>тег display:noneза замовчуванням.
• + Інерт - браузер не розбирає вміст скрипту як JS, оскільки його тип встановлений на щось інше, ніж на "text/javascript".
• -Проблеми безпеки - заохочує використання .innerHTML. Синтаксичний аналіз рядків даних, що надаються користувачем, може легко призвести до вразливості XSS.

Повна стаття: https://www.html5rocks.com/en/tutorials/webcomponents/template/#toc-old

Корисна довідка: https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode http://caniuse.com/#feat=queryselector

СТВОРЕННЯ ВЕБ-КОМПОНЕНТІВ Створення навчальних посібників веб-компонентів за допомогою шаблонів HTML від Trawersy Media: https://youtu.be/PCWaFLy3VUo

Додайте десь у тіло

<div class="hide">
<a href="#" class="list-group-item">
    <table>
        <tr>
            <td><img src=""></td>
            <td><p class="list-group-item-text"></p></td>
        </tr>
    </table>
</a>
</div>

потім створіть css

.hide { display: none; }

і додати до свого js

$('#output').append( $('.hide').html() );

Інша альтернатива: чисто

Я ним користуюся, і це мені дуже допомогло. Приклад, показаний на їхньому веб-сайті:

HTML

<div class="who">
</div>

JSON

{
  "who": "Hello Wrrrld"
}

Результат

<div class="who">
  Hello Wrrrld
</div>

Для вирішення цієї проблеми я розпізнаю два рішення:

• Перший - це AJAX, за допомогою якого вам доведеться завантажувати шаблон з іншого файлу та просто додавати щоразу, коли вам потрібно .clone().

  $.get('url/to/template', function(data) {
      temp = data
      $('.search').keyup(function() {
          $('.list-items').html(null);
  
          $.each(items, function(index) {
               $(this).append(temp.clone())
          });
  
      });
  });

  Враховуйте, що подію слід додати після завершення ajax, щоб переконатися, що дані доступні!

• Другий - це безпосередньо додати його будь-де в оригінальний html, вибрати його та сховати у jQuery:

  temp = $('.list_group_item').hide()

  Після цього можна додати новий екземпляр шаблону за допомогою

  $('.search').keyup(function() {
      $('.list-items').html(null);
  
      $.each(items, function(index) {
          $(this).append(temp.clone())
      });
  });

• Те саме, що і попередній, але якщо ви не хочете, щоб шаблон залишався там, а просто у JavaScript, я думаю, ви можете використовувати (не перевіряли його!) .detach()Замість приховування.

  temp = $('.list_group_item').detach()

  .detach() видаляє елементи з DOM, зберігаючи дані та події живими (.remove () не!).

Дуже хороша відповідь від DevWL про використання нативного елемента шаблону HTML5 . Щоб сприяти цьому хорошому питанню від ОП, я хотів би додати, як використовувати цей templateелемент, використовуючи jQuery, наприклад:

$($('template').html()).insertAfter( $('#somewhere_else') );

Вміст templateфайлу не є html, а просто трактується як дані, тому вам потрібно загортати вміст в об’єкт jQuery, щоб потім отримати доступ до методів jQuery.