Eu tenho uma matriz que eu estou fazendo um loop. Sempre que uma condição for verdadeira, desejo anexar uma cópia do HTMLcódigo abaixo a um elemento de contêiner com alguns valores.

Onde posso colocar esse HTML para reutilizar de maneira inteligente?

<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
    });
});

Você pode optar por usar um mecanismo de modelo no seu projeto, como:

• bigode
• underscore.js
• guidão

Se você não deseja incluir outra biblioteca, John Resig oferece uma solução jQuery , semelhante à abaixo.

Navegadores e leitores de tela ignoram os tipos de script não reconhecidos:

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

Usando o jQuery, adicionar linhas com base no modelo seria semelhante a:

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

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

Pergunta antiga, mas como a pergunta é "usando jQuery", pensei em fornecer uma opção que permita fazer isso sem introduzir nenhuma dependência de fornecedor.

Embora existam muitos mecanismos de modelagem por aí, muitos de seus recursos caíram em desagrado recentemente, com iteração ( <% for), condicionais ( <% if) e transformações ( <%= myString | uppercase %>) vistas como micro-idioma na melhor das hipóteses e antipadrões na pior. As práticas modernas de modelagem incentivam simplesmente o mapeamento de um objeto para sua representação DOM (ou outra), por exemplo, o que vemos com propriedades mapeadas para componentes no ReactJS (especialmente componentes sem estado).

Modelos dentro do HTML

Uma propriedade em que você pode confiar para manter o HTML do seu modelo próximo ao restante do HTML é usar um não executável <script> type, por exemplo <script type="text/template">. Para o seu caso:

<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>

No carregamento do documento, leia o seu modelo e o tokenize usando um simples String#split

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

Observe que, com nosso token, você o obtém no [text, property, text, property]formato alternado . Isso nos permite mapeá-lo bem usando uma Array#mapfunção de mapeamento:

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

Onde propspoderia parecer { url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' }.

Reunindo tudo, assumindo que você analisou e carregou o seu itemTplcomo acima, e você tem uma itemsmatriz no escopo:

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

Essa abordagem também é apenas apenas jQuery - você deve ser capaz de adotar a mesma abordagem usando javascript vanilla com document.querySelectore .innerHTML.

jsfiddle

Modelos dentro de JS

Uma pergunta a ser feita é: você realmente deseja / precisa definir modelos como arquivos HTML? Você sempre pode componente + reutilizar um modelo da mesma maneira que reutilizaria a maioria das coisas que deseja repetir: com uma função.

No es7-land, usando funções de desestruturação, seqüências de caracteres de modelo e setas, você pode escrever funções de componentes absolutamente bonitas que podem ser facilmente carregadas usando o $.fn.htmlmétodo acima.

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>
`;

Então você poderia renderizá-lo facilmente, mesmo mapeado a partir de uma matriz, assim:

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

Ah, e observação final: não se esqueça de higienizar suas propriedades passadas para um modelo, se forem lidas em um banco de dados ou se alguém puder passar HTML (e depois executar scripts etc.) da sua página.

Use o modelo HTML!

Como a resposta aceita representaria um método de sobrecarga de script, gostaria de sugerir outro que seja, na minha opinião, muito mais limpo e mais seguro devido aos riscos XSS que acompanham os scripts de sobrecarga.

Fiz uma demonstração para mostrar como usá-lo em uma ação e como injetar um modelo em outro, editar e adicionar ao documento DOM.

exemplo 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>

exemplo 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 <template>

• + Seu conteúdo é efetivamente inerte até ser ativado. Essencialmente, sua marcação está oculta no DOM e não é renderizada.

• + Qualquer conteúdo dentro de um modelo não terá efeitos colaterais. Os scripts não são executados, as imagens não são carregadas, o áudio não é reproduzido ... até que o modelo seja usado.

• O conteúdo é considerado como não estando no documento. Usar document.getElementById()ou querySelector()na página principal não retornará nós filhos de um modelo.

• + Os modelos podem ser colocados em qualquer lugar no interior de <head>, <body>ou <frameset>e pode conter qualquer tipo de conteúdo que é permitido naqueles elementos. Observe que "qualquer lugar" significa que <template>pode ser usado com segurança em locais que o analisador de HTML não permite.

Cair pra trás

O suporte ao navegador não deve ser um problema, mas se você deseja cobrir todas as possibilidades, pode fazer uma verificação fácil:

Para detectar recursos <template>, crie o elemento DOM e verifique se a propriedade .content existe:

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

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

Algumas informações sobre o método de script Sobrecarregando

• + Nada é renderizado - o navegador não renderiza esse bloco porque a <script>tag possui display:nonepor padrão.
• + Inert - o navegador não analisa o conteúdo do script como JS porque seu tipo está definido para algo diferente de "text/javascript".
• Questões de segurança - incentiva o uso de .innerHTML. A análise de string em tempo de execução dos dados fornecidos pelo usuário pode facilmente levar a vulnerabilidades do XSS.

Artigo completo: https://www.html5rocks.com/en/tutorials/webcomponents/template/#toc-old

Referência útil: https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode http://caniuse.com/#feat=queryselector

CRIANDO COMPONENTES DA WEB Tutorial de criação de componentes da Web personalizados usando modelos HTML da Trawersy Media: https://youtu.be/PCWaFLy3VUo

Adicione em algum lugar do corpo

<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>

então crie css

.hide { display: none; }

e adicione aos seus js

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

Outra alternativa: Pure

Eu o uso e isso me ajudou muito. Um exemplo mostrado em seu site:

HTML

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

JSON

{
  "who": "Hello Wrrrld"
}

Resultado

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

Para resolver esse problema, reconheço duas soluções:

• O primeiro vem com o AJAX, com o qual você terá que carregar o modelo de outro arquivo e adicionar sempre que quiser .clone().

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

  Leve em consideração que o evento deve ser adicionado assim que o ajax for concluído para garantir que os dados estejam disponíveis!

• O segundo seria adicioná-lo diretamente em qualquer lugar do html original, selecioná-lo e ocultá-lo no jQuery:

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

  Depois, você pode adicionar uma nova instância do modelo com

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

• Igual ao anterior, mas se você não quiser que o modelo permaneça lá, mas apenas no javascript, acho que você pode usar (não o testou!) Em .detach()vez de ocultar.

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

  .detach() remove elementos do DOM enquanto mantém os dados e eventos ativos (.remove () não!).

Resposta muito boa do DevWL sobre o uso do elemento de modelo HTML5 nativo . Para contribuir com essa boa pergunta do OP, gostaria de acrescentar como usar esse templateelemento usando o jQuery, por exemplo:

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

O conteúdo do templatearquivo não é html, mas apenas tratado como dados; portanto, você precisa agrupar o conteúdo em um objeto jQuery para acessar os métodos do jQuery.