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>