如何使用数组数据替换HTML heading内文本 实现JSON解析后玩家卡片渲染

单卡片文本替换方案 #

你可以直接通过DOM选择器定位到目标标题标签，修改textContent属性完成替换，代码示例如下：

// 匹配class为card__title的h3下的a标签，可根据实际页面结构调整选择器精度
const titleAnchor = document.querySelector('.card__title a')
// 替换文本内容
titleAnchor.textContent = cardTitle0

注：纯文本替换优先用textContent，不要用innerHTML赋值，避免接口返回内容带恶意脚本触发XSS安全风险。

多属性、多卡片通用渲染方案 #

如果需要批量替换多个属性、渲染多条卡片数据，推荐用模板字符串动态生成DOM结构，可维护性更高，实现步骤如下：

1. 先在HTML中新增空的卡片容器

<div class="card-list"></div>

2. 编写JS批量渲染逻辑

const cardListContainer = document.querySelector('.card-list')
// 遍历卡片数据批量生成HTML字符串
const allCardHtml = cardList.map(cardItem => `
<div class="card">
  <h3 class="card__title">
    <a href="item.html?id=${cardItem.id}">${cardItem.name}</a>
  </h3>
  <!-- 其他属性直接对应插入对应位置即可，示例如下 -->
  <p class="card__role">职业：${cardItem.role || '未设置'}</p>
  <span class="card__score">战力：${cardItem.score || 0}</span>
</div>
`).join('')
// 一次性插入到页面容器中
cardListContainer.innerHTML = allCardHtml

内容的提问来源于stack exchange，提问作者vkrishnan23