Templates

Templates

The HTML Templates specification is the normative description of this part of Web Components.

The <template> element contains markup intended to be used later. The content of the

The <template> element has property called content which holds the content of the template in a document fragment. When the author wants to use the the content they can move or copy the nodes from this property:

<template id="commentTemplate">
    <div>
        <img src="">
        <div class="comment-text"></div>
    </div>
</template>
<script>
function addComment(imageUrl, text) {
  var t = document.querySelector("#commentTemplate");
  var comment = t.content.cloneNode(true);
  // Populate content.
  comment.querySelector('img').src = imageUrl;
  comment.querySelector('.comment-text').textContent = text;
  document.body.appendChild(comment);
}
</script>