오래된 질문이지만 “jQuery 사용”이라는 질문이 있기 때문에 공급 업체 종속성을 도입하지 않고도이 작업을 수행 할 수있는 옵션을 제공 할 것이라고 생각했습니다.

많은 템플릿 엔진이 있지만 최근에는 반복 ( <% for), 조건부 ( <% 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를 – 당신은 바닐라 자바 스크립트를 사용하여 동일한 접근을 할 수 있어야 document.querySelector하고 .innerHTML.

jsfiddle

JS 내부 템플릿

스스로에게 물어볼 질문은 다음과 같습니다. 템플릿을 HTML 파일로 정의하고 싶습니까 / 필요합니까? 반복하려는 대부분의 항목을 재사용하는 것과 동일한 방식으로 템플릿을 구성 요소 화 및 재사용 할 수 있습니다. 함수를 사용하면됩니다.

es7-land에서는 destructuring, 템플릿 문자열 및 화살표 함수를 사용하여 $.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(''));

마지막 참고 사항 : DB에서 읽은 속성을 템플릿에 전달한 속성을 삭제하는 것을 잊지 마십시오. 그렇지 않으면 누군가 페이지에서 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>

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

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

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

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

.hide { display: none; }

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

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

{
  "who": "Hello Wrrrld"
}

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

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