JS DOM – fromTemplate

Uczymy się korzystać z tagów HTML template. Piszemy funkcję, która pozwala nam je wykorzystywać. Do dzieła.

Nasz HTML:

<template id="myTemplate">
        <h1>My heading</h1>
        <p>My para</p>
</template>

<div id="myDiv"></div>

Tag template jest niewidoczny. Tag div jest pusty. Złapmy je w JS:

window.addEventListener('DOMContentLoaded', function(){

    let tpl = document.getElementById("myTemplate");
    let div = document.getElementById('myDiv');

});

Teraz napiszmy funkcję fromTemplate:

window.addEventListener('DOMContentLoaded', function(){

    let tpl = document.getElementById("myTemplate");
    let div = document.getElementById('myDiv');

    function fromTemplate(el){
        if(!el.matches("template"))
            return null;
        return el.content.cloneNode(true);
    }

    console.log(fromTemplate(div));
    //null

    console.log(fromTemplate(tpl));
    //DocumentFragment(5) [ #text, h1, #text, p, #text ]

    div.appendChild(fromTemplate(tpl));
});

Kopiuje zawartość – pod warunkiem, że znajduje się ona w tagu template.