本文介绍如何通过 DOM 操作将两组 JavaScript 动态数据（如 r_laps 和 r_dfs）渲染到同一 单元格内的不同容器中，并支持添加括号等自定义格式，确保语义清晰、结构可控、样式可维护。
本文介绍如何通过 dom 操作将两组 javascript 动态数据（如 r_laps 和 r_dfs）渲染到同一
在实际前端开发中，常需将多个逻辑上关联但来源独立的数据（例如“圈数”与“DFS 得分”）并排展示于表格同一单元格内。直接拼接字符串虽可行，但缺乏结构化控制和后续样式/交互扩展能力。推荐做法是：保留语义化 DOM 结构，通过 JavaScript 分别注入内容，并利用内联格式增强可读性。
以下为标准实现方案：
<td>
<div class="rcelldata">
<div id="r_laps"></div>
<div id="r_dfs"></div>
</div>
</td>对应 JavaScript（ES6+）：
// 假设已从接口或变量获取数据
const r_laps_recieved = "42";
const r_dfs_recieved = "89.5";
// 获取 DOM 元素（建议在 DOM 加载完成后执行）
const rLapsEl = document.getElementById("r_laps");
const rDfsEl = document.getElementById("r_dfs");
// 分别写入内容，保持结构分离
rLapsEl.textContent = r_laps_recieved;
rDfsEl.textContent = `(${r_dfs_recieved})`; // ✅ 自动添加括号✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- 每个 独立承载数据，便于后续 CSS 控制间距（如 display: inline-block 或 margin-left: 4px）；
- 使用 .textContent 而非 .innerHTML 可避免 XSS 风险（除非内容含可信 HTML）；
- 模板字符串（`(${...})`）简洁安全地实现格式包裹。
⚠️ 注意事项：
- 确保脚本在目标元素渲染后执行（推荐使用 DOMContentLoaded 或将 <script> 放在 </script>
