当前位置：首页 > news >正文

以下是使用JavaScript动态拼接数组内容到HTML的多种方法及示例：

news 2026/6/15 15:28:42

一、基础方法：字符串拼接 +`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	`element.innerHTML = data.map(...)`	灵活但代码冗长
React	`{data.map(item => <li>{item}</li>)}`	组件化，虚拟DOM优化
Vue	`{{ item }}`在模板中直接绑定	声明式语法，双向绑定