Templates

"Declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents."

• Bundles fragments of DOM
• Inert at page load
• Instantiated later at runtime

Alternatives

• Hidden DOM
• Templates frameworks

To-do list

                
// Clone the template
var template = document.querySelector('#todo-list-item-template');
var clone = document.importNode(template.content, true);

// Change and append
clone.querySelector('.item-number').innerHTML = counter++;
clone.querySelector('.item-text').innerHTML = text;
list.appendChild(clone);
                
            

Example: