Embedded HTML in JavaScript

// Basic HTML element creation and embedding
function createAndEmbedHTML() {
  // Create a container div
  const container = document.createElement('div');
  container.className = 'embedded-content';
  container.style.cssText = 'padding: 20px; background: #f8f9fa; border-radius: 8px; margin: 20px 0;';
  
  // Create HTML content
  const title = document.createElement('h3');
  title.textContent = 'Dynamically Created Content';
  title.style.color = '#2d3748';
  
  const paragraph = document.createElement('p');
  paragraph.textContent = 'This HTML content was created and embedded using JavaScript.';
  paragraph.style.color = '#4a5568';
  
  const button = document.createElement('button');
  button.textContent = 'Click Me!';
  button.style.cssText = 'background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px;';
  button.onclick = () => alert('Button clicked!');
  
  // Assemble the content
  container.appendChild(title);
  container.appendChild(paragraph);
  container.appendChild(button);
  
  // Embed into the page
  document.getElementById('embedContainer').appendChild(container);
}

// Usage
document.getElementById('createBtn').addEventListener('click', createAndEmbedHTML);

// Using template literals for HTML embedding
function embedHTMLWithTemplate() {
  const userData = {
    name: 'John Doe',
    email: '[email protected]',
    avatar: 'https://via.placeholder.com/100'
  };
  
  const htmlTemplate = `
    <div class="user-card" style="
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      text-align: center;
      max-width: 300px;
    ">
      <img src="${userData.avatar}" alt="User Avatar" style="
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: 15px;
      ">
      <h3 style="color: #2d3748; margin: 0 0 10px 0;">${userData.name}</h3>
      <p style="color: #718096; margin: 0;">${userData.email}</p>
      <button onclick="editUser()" style="
        background: #38a169;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        margin-top: 15px;
      ">
        Edit Profile
      </button>
    </div>
  `;
  
  // Embed the HTML
  document.getElementById('templateContainer').innerHTML = htmlTemplate;
}

function editUser() {
  alert('Edit user functionality would go here');
}

// Usage
document.getElementById('templateBtn').addEventListener('click', embedHTMLWithTemplate);