HTML Editor - Edit Your Source Code Online

Source Code: (back to article)

<body>
  <div id="template-container">
    
    <template id="button-template">
      <button id="show-content-btn">Add a content card</button>
    </template>

<template id="content-template">
      <div class="content">
        <h2>Dynamic Content</h2>
        <p>This content is added dynamically when the button is clicked.</p>
      </div>
    </template>
  </div>

// Display the cloned content
      document.getElementById('content-container').appendChild(contentClone);
    }

// Insert the button template into the DOM
    function insertButton() {
      // Get the button template
      const buttonTemplate = document.getElementById('button-template');
      const buttonClone = document.importNode(buttonTemplate.content, true);

// Add event listener to the button
      buttonClone.querySelector('#show-content-btn').addEventListener('click', displayTemplateContent);

// Insert the button into the DOM
      document.getElementById('button-container').appendChild(buttonClone);
    }

// Call the function to insert the button when the page loads
    insertButton();
  </script>
</body>