动态创建常见HTML标签：从基础到最佳实践

// 1. 创建按钮元素
const button = document.createElement('button');
 
// 2. 设置属性与内容
button.textContent = '点击提交'; // 设置按钮文本
button.classList.add('btn', 'btn-primary'); // 添加CSS类
button.setAttribute('type', 'submit'); // 设置type属性（表单提交）
 
// 3. 添加点击事件（可选）
button.addEventListener('click', () => {
  alert('按钮被点击了！');
});
 
// 4. 插入到body中
document.body.appendChild(button);

const container = document.querySelector('.container');
 
// 直接插入HTML字符串
container.innerHTML = `
  <div class="card">
    <h3 class="card-title">动态卡片</h3>
    <p class="card-content">这是通过innerHTML创建的内容。</p>
  </div>
`;

<!-- 1. 定义模板（不会被渲染） -->
<template id="card-template">
  <div class="card">
    <img class="card-img" alt="" />
    <h3 class="card-title"></h3>
    <p class="card-content"></p>
  </div>
</template>

// 2. 克隆并填充模板
function createCard(imgSrc, title, content) {
  const template = document.getElementById('card-template');
  // 克隆模板内容（深度克隆）
  const card = template.content.cloneNode(true);
  
  // 填充动态内容
  card.querySelector('.card-img').src = imgSrc;
  card.querySelector('.card-img').alt = title;
  card.querySelector('.card-title').textContent = title;
  card.querySelector('.card-content').textContent = content;
  
  return card;
}
 
// 3. 使用模板创建卡片并插入DOM
const card1 = createCard(
  'cat.jpg', 
  '可爱的猫咪', 
  '这只猫咪正在玩毛线球。'
);
const card2 = createCard(
  'dog.jpg', 
  '活泼的小狗', 
  '这只小狗正在追飞盘。'
);
 
// 插入到容器中
document.querySelector('.card-container').appendChild(card1);
document.querySelector('.card-container').appendChild(card2);

function createModal(title, content) {
  // 1. 创建弹窗容器
  const modal = document.createElement('div');
  modal.classList.add('modal');
 
  // 2. 创建弹窗内容
  const modalContent = document.createElement('div');
  modalContent.classList.add('modal-content');
 
  // 3. 标题
  const modalTitle = document.createElement('h2');
  modalTitle.textContent = title;
 
  // 4. 内容段落
  const modalBody = document.createElement('p');
  modalBody.textContent = content;
 
  // 5. 关闭按钮
  const closeBtn = document.createElement('button');
  closeBtn.textContent = '关闭';
  closeBtn.classList.add('modal-close');
  closeBtn.addEventListener('click', () => {
    modal.remove(); // 点击后移除弹窗
  });
 
  // 组装结构
  modalContent.appendChild(modalTitle);
  modalContent.appendChild(modalBody);
  modalContent.appendChild(closeBtn);
  modal.appendChild(modalContent);
 
  // 插入到body（弹窗通常是body的直接子元素）
  document.body.appendChild(modal);
}
 
// 调用函数创建弹窗
createModal('提示', '这是一个动态生成的弹窗！');

const paragraph = document.querySelector('.text-paragraph');
const keyword = '动态创建';
 
// 1. 获取原文本并拆分
const text = paragraph.textContent;
const parts = text.split(keyword);
 
// 2. 创建span元素包裹关键词
const span = document.createElement('span');
span.textContent = keyword;
span.classList.add('highlight'); // 高亮样式（如黄色背景）
 
// 3. 重组文本并插入
paragraph.textContent = ''; // 清空原文本
paragraph.appendChild(document.createTextNode(parts[0]));
paragraph.appendChild(span);
paragraph.appendChild(document.createTextNode(parts[1]));

function createImage(src, alt, width = 300) {
  const img = document.createElement('img');
  img.src = src;
  img.alt = alt;
  img.width = width; // 设置宽度（可选，用于布局稳定性）
  img.classList.add('responsive-img'); // 响应式样式（如max-width: 100%）
  return img;
}
 
// 使用函数
const catImg = createImage(
  'cat.jpg', 
  '一只橘猫趴在窗台上晒太阳', 
  400
);
document.body.appendChild(catImg);

function createLoadingButton(label) {
  const button = document.createElement('button');
  button.textContent = label;
  button.classList.add('btn', 'btn-loading');
 
  // 点击后切换加载状态
  button.addEventListener('click', async () => {
    button.disabled = true; // 禁用按钮防止重复点击
    button.textContent = '加载中...';
 
    // 模拟异步请求（如提交表单）
    await new Promise(resolve => setTimeout(resolve, 2000));
 
    // 请求完成后恢复状态
    button.disabled = false;
    button.textContent = label;
  });
 
  return button;
}
 
// 使用函数
const loadBtn = createLoadingButton('点击加载');
document.body.appendChild(loadBtn);

function createInputWithLabel(labelText, inputType = 'text') {
  // 1. 创建label元素
  const label = document.createElement('label');
  label.textContent = labelText;
  const inputId = `input-${Date.now()}`; // 生成唯一ID（避免冲突）
  label.setAttribute('for', inputId); // 关联input的id
 
  // 2. 创建input元素
  const input = document.createElement('input');
  input.id = inputId;
  input.type = inputType;
  input.placeholder = `请输入${labelText}`;
  input.required = true; // 设置为必填项（表单验证）
 
  // 3. 组装并返回
  const container = document.createElement('div');
  container.classList.add('input-group');
  container.appendChild(label);
  container.appendChild(input);
 
  return container;
}
 
// 使用函数创建邮箱输入框
const emailInput = createInputWithLabel('邮箱', 'email');
document.body.appendChild(emailInput);

async function fetchTodos() {
  try {
    // 从JSONPlaceholder获取模拟数据（https://jsonplaceholder.typicode.com/）
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const todos = await response.json();
 
    // 创建ul元素
    const ul = document.createElement('ul');
    ul.classList.add('todo-list');
 
    // 遍历数据生成li
    todos.forEach(todo => {
      const li = document.createElement('li');
      li.textContent = todo.title;
 
      // 根据完成状态添加样式
      if (todo.completed) {
        li.classList.add('completed'); // 已完成的任务（如划线样式）
      }
 
      ul.appendChild(li);
    });
 
    // 插入到容器中
    document.querySelector('.todo-container').appendChild(ul);
  } catch (error) {
    console.error('获取数据失败：', error);
  }
}
 
// 调用函数
fetchTodos();

const fragment = document.createDocumentFragment();
 
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `第${i+1}项`;
  fragment.appendChild(li);
}
 
// 仅一次插入操作
document.querySelector('ul').appendChild(fragment);

// 父元素（ul）
const todoList = document.querySelector('.todo-list');
 
// 监听父元素的点击事件
todoList.addEventListener('click', (e) => {
  // 检查点击的是li元素（e.target是触发事件的元素）
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('completed'); // 切换完成状态
  }
});
 
// 动态添加列表项（无需重新绑定事件）
function addTodoItem(text) {
  const li = document.createElement('li');
  li.textContent = text;
  todoList.appendChild(li);
}
 
// 调用函数添加项
addTodoItem('学习动态创建标签');
addTodoItem('掌握事件委托');

// 定义自定义元素 <my-card>
class MyCard extends HTMLElement {
  constructor() {
    super();
    // 1. 克隆template内容
    const template = document.getElementById('my-card-template');
    const content = template.content.cloneNode(true);
 
    // 2. 填充属性（从自定义元素的属性中获取）
    const title = this.getAttribute('title');
    const contentText = this.getAttribute('content');
    content.querySelector('.card-title').textContent = title;
    content.querySelector('.card-content').textContent = contentText;
 
    // 3. 附加到Shadow DOM（封装样式，避免影响外部）
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(content);
  }
}
 
// 注册自定义元素
customElements.define('my-card', MyCard);

<!-- 定义template -->
<template id="my-card-template">
  <style>
    .card { border: 1px solid #eee; padding: 16px; border-radius: 8px; }
    .card-title { font-size: 1.2rem; margin-bottom: 8px; }
    .card-content { color: #666; }
  </style>
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-content"></p>
  </div>
</template>
 
<!-- 使用自定义元素（动态或静态） -->
<my-card title="Web Components" content="这是一个原生组件！"></my-card>