使用document.createElement创建元素并用appendChild构建父子关系，通过封装函数提升复用性，静态结构可用innerHTML优化性能，按需选择方案实现高效DOM操作。

在JavaScript中创建嵌套的HTML元素结构，核心是使用DOM方法动态生成元素，并通过父子关系组织它们。不需要依赖框架就能实现清晰、可维护的结构。

使用 document.createElement 构建嵌套结构

最基础的方式是用 document.createElement 创建每个元素，再用 appendChild 或 append 添加子元素。

• 先创建父元素，例如一个 div 容器
• 创建子元素（如 h2、p、span 等）并设置内容或属性
• 将子元素逐层添加到父元素中
• 最后将整个结构插入页面指定位置

const container = document.createElement('div');
container.className = 'card';

const title = document.createElement('h2');
title.textContent = '标题';

const content = document.createElement('p');
content.textContent = '这是一段描述内容。';

container.appendChild(title);
container.appendChild(content);

document.body.appendChild(container);

封装函数提高可读性和复用性

当结构复杂时，把创建逻辑封装成函数会更清晰。可以返回完整的DOM节点，便于组合多个组件。

• 定义函数接收数据参数（如标题、内容）
• 在函数内部构建对应的嵌套结构
• 返回根元素，方便插入或继续嵌套

function createCard(titleText, bodyText) {
  const card = document.createElement('div');
  card.classList.add('card');

  const title = document.createElement('h3');
  title.textContent = titleText;

  const body = document.createElement('p');
  body.textContent = bodyText;

  card.append(title, body);
  return card;
}

// 使用
const myCard = createCard('欢迎', '这是卡片内容');
document.getElementById('app').appendChild(myCard);

使用 innerHTML 快速生成（适合静态结构）

如果结构固定且不涉及事件绑定，可以用 innerHTML 直接写HTML字符串，代码更简洁。

Is This Image NSFW?

图片安全检测，AI分析图像是否适合安全工作

下载

立即学习“前端免费学习笔记（深入）”；

• 适用于无需频繁更新的静态内容
• 注意避免用户输入直接拼接，防止XSS攻击
• 性能上通常比多次 createElement 快

const container = document.createElement('div');
container.innerHTML = `
  

    
面板标题
    

      
主要内容区
      

        
列表项1
        
列表项2
      
    
  
`;
document.body.appendChild(container);