Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Cloning and Inserting Template Content</title> </head> <body> <template id="my-template"> <div class="card"> <h2>Dynamic Title</h2> <p>Dynamic content goes here...</p> </div> </template> <button id="add-card">Add Card</button> <div id="container"></div> <script> document.getElementById('add-card').addEventListener('click', () => { const template = document.getElementById('my-template'); const clone = document.importNode(template.content, true); document.getElementById('container').appendChild(clone); }); </script> </body> </html>