企业官网建设流程全解析

一、基础方法：字符串拼接 +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）实现更复杂渲染。

五、性能优化方案

1. 文档片段（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);

2. 分页加载​

   大数据量时分批渲染：

   let page = 0; function loadPage(size) { const chunk = data.slice(page * size, (page+1)*size); // 渲染chunk到页面 page++; }

六、框架方案对比

七、安全注意事项

1. 转义用户输入​

   使用textContent而非innerHTML避免XSS：

   element.textContent = userInput; // 自动转义

2. 内容安全策略（CSP）​

   服务器端设置CSP头限制脚本执行。

通过上述方法，您可以根据需求选择最适合的动态渲染方案。简单场景推荐innerHTML拼接，复杂交互建议使用DOM操作，大数据量时结合分页或文档片段优化性能。