一、基础方法：字符串拼接 +innerHTML
适用场景：简单文本内容快速渲染
示例代码：
<div id="output"></div> <script> const data = ["苹果", "香蕉", "橙子"]; let html = ""; data.forEach(item => { html += `<p>${item}</p>`; }); document.getElementById("output").innerHTML = html; </script>特点：代码简洁，但需注意XSS风险，不适合复杂结构。
二、DOM操作：动态创建元素
适用场景：需要操作元素属性或事件
示例代码：
<ul id="fruits"></ul> <script> const data = ["苹果", "香蕉", "橙子"]; const ul = document.getElementById("fruits"); data.forEach(item => { const li = document.createElement("li"); li.textContent = item; li.style.color = "blue"; // 可添加样式/事件 ul.appendChild(li); }); </script>优势：避免XSS，支持动态交互。
三、模板字符串 +insertAdjacentHTML
适用场景：混合静态与动态内容
示例代码：
<div id="container"></div> <script> const data = [18, 25, 30]; const container = document.getElementById("container"); const template = ` <div class="user"> <span>年龄：${data[0]}</span> <span>身高：${data[1]}</span> <span>体重：${data[2]}</span> </div> `; container.insertAdjacentHTML("beforeend", template); </script>特点：保持HTML结构清晰，适合复杂模板。
四、处理对象数组
适用场景：渲染包含多个属性的数据
示例代码：
<ul id="users"></ul> <script> const users = [ { name: "张三", age: 28 }, { name: "李四", age: 32 } ]; const ul = document.getElementById("users"); users.forEach(user => { const li = document.createElement("li"); li.innerHTML = `<strong>${user.name}</strong> - ${user.age}岁`; ul.appendChild(li); }); </script>扩展：可结合模板引擎库（如Handlebars）实现更复杂渲染。
五、性能优化方案
文档片段（DocumentFragment）
减少DOM操作次数，提升性能：
const fragment = document.createDocumentFragment(); data.forEach(item => { const li = document.createElement("li"); li.textContent = item; fragment.appendChild(li); }); document.getElementById("list").appendChild(fragment);分页加载
大数据量时分批渲染：
let page = 0; function loadPage(size) { const chunk = data.slice(page * size, (page+1)*size); // 渲染chunk到页面 page++; }
六、框架方案对比
框架 | 语法示例 | 特点 |
|---|---|---|
原生JS |
| 灵活但代码冗长 |
React |
| 组件化，虚拟DOM优化 |
Vue |
| 声明式语法，双向绑定 |
七、安全注意事项
转义用户输入
使用
textContent而非innerHTML避免XSS：element.textContent = userInput; // 自动转义内容安全策略（CSP）
服务器端设置CSP头限制脚本执行。
通过上述方法，您可以根据需求选择最适合的动态渲染方案。简单场景推荐innerHTML拼接，复杂交互建议使用DOM操作，大数据量时结合分页或文档片段优化性能。
