使用模板字符串和DOM API 结合组件化与递归策略可高效渲染复杂 HTML。通过模板字符串拼接结构化内容，适用于静态或半动态场景；利用 createElement 等 DOM 方法实现精细控制，提升安全性和交互能力；将界面拆分为函数式组件（如 renderHeader、renderSidebar），增强可维护性；对嵌套数据采用递归处理（如评论列表）；结合 DocumentFragment 批量插入减少重绘，优化性能。核心在于模块化组织与合理选择渲染方式，避免频繁操作 innerHTML，确保代码清晰高效。
直接用纯 JavaScript 渲染复杂 HTML 结构，关键在于组织方式和可维护性。虽然没有 JSX 或模板引擎那么直观，但通过合理的方法依然可以高效实现。
使用 template 字符串构建 HTML
ES6 的模板字符串（template literals）支持多行文本和变量插入，非常适合拼接结构化的 HTML。
将 HTML 拆分为模块化函数，每个函数返回一段结构，便于复用和阅读。
示例：
function renderUserCard(user) {
return `
`;
}
// 批量渲染
const userList = document.getElementById('user-list');
users.forEach(user => {
userList.innerHTML += renderUserCard(user);
});
优点：写法简洁，适合静态或半动态内容。注意：频繁操作 innerHTML 可能引发性能问题，建议累积后一次性插入。
通过 DOM API 动态创建元素
对于需要事件绑定或动态行为的结构，推荐使用原生 DOM 方法如 createElement、appendChild 等。
function createUserCardElement(user) {
const card = document.createElement('div');
card.className = 'user-card';
const img = document.createElement('img');
img.src = user.avatar;
img.alt = user.name;
const title = document.createElement('h3');
title.textContent = user.name;
const bio = document.createElement('p');
bio.textContent = user.bio;
card.appendChild(img);
card.appendChild(title);
card.appendChild(bio);
return card;
}
// 使用文档片段减少重绘
const fragment = document.createDocumentFragment();
users.forEach(user => {
fragment.appendChild(createUserCardElement(user));
});
document.getElementById('user-list').appendChild(fragment);
优点：完全控制 DOM，适合复杂交互；避免 innerHTML 带来的 XSS 风险。技巧：用 DocumentFragment 批量插入，提升性能。
组件化管理复杂结构
将大结构拆成小“组件”函数，每个负责一块 UI，组合调用。
例如：页面由 Header、Sidebar、MainContent 组成，分别定义渲染函数。
示例：
function renderPage(data) {
const page = document.createElement('div');
page.className = 'page';
page.appendChild(renderHeader(data.header));
page.appendChild(renderSidebar(data.menu));
page.appendChild(renderMainContent(data.content));
return page;
}
好处：逻辑分离，易于测试和维护；类似现代框架的组件思维。
结合数据与结构的渲染策略
复杂结构往往依赖层级数据（如树形菜单、评论列表）。递归是常见解法。
示例：递归渲染嵌套评论
function renderComments(comments) {
const container = document.createElement('div');
comments.forEach(comment => {
const el = document.createElement('div');
el.className = 'comment';
el.innerHTML = `${comment.text}
`;
if (comment.replies && comment.replies.length > 0) {
const replies = renderComments(comment.replies); // 递归
el.appendChild(replies);
}
container.appendChild(el);
});
return container;
}
适用场景：目录树、多级导航、嵌套评论等。
基本上就这些。用模板字符串快速生成，用 DOM API 精确控制，再配合组件化和递归，纯 JS 完全能胜任复杂 HTML 渲染任务。关键是保持结构清晰，避免一大坨拼接字符串堆在一起。
