如何为数组元素添加span标签并渲染，求不使用innerHTML的更优实现方案

开发者需要为数组内的每个元素做格式化处理，给指定片段添加带红色字体样式的<span>标签。目前已实现可跑通的基础版本，但不确定方案是否最优，尤其希望规避对innerHTML的依赖，寻找实现成本更低的合理实现路径。

现有实现的待优化问题 #

• 内容构造阶段对<span>标签做了HTML实体转义，直接赋值给innerHTML时，页面会原样显示转义后的标签文本，无法渲染出预期的红色字体效果
• 数组构造逻辑存在冗余且不规范：无参数调用split()仅会返回包含原字符串的单元素数组，后续通过concat聚合的逻辑完全可以用数组字面量直接实现
• 依赖innerHTML做渲染存在XSS安全风险，且不符合开发者的使用偏好
• 索引自增逻辑未绑定执行场景，无法实现按数组顺序依次展示内容的预期效果

低实现成本的推荐方案 #

1. 解耦数据与视图，用纯数据结构替代硬编码HTML字符串 #

不需要提前把带标签的内容硬编码成转义字符串，先把核心业务数据抽成纯文本的数组结构，从根源减少字符串拼接、转义的冗余操作：

// 纯数据数组，无硬编码HTML标签
const contentList = [
  { prefix: 'I am the ', highlight: 'first' },
  { prefix: 'I am the ', highlight: 'second' }
]

2. 用原生DOM API实现安全渲染，完全规避对innerHTML的依赖 #

通过浏览器原生的DOM节点构造能力实现渲染，不需要依赖innerHTML，实现逻辑简单，安全性更高：

// 获取目标渲染容器
const targetContainer = document.querySelector('#myhtml')
// 遍历数组元素逐个构造节点
contentList.forEach(item => {
  // 用纯文本节点写入前缀内容，避免注入风险
  const prefixNode = document.createTextNode(item.prefix)
  // 构造带红色样式的高亮span节点
  const highlightNode = document.createElement('span')
  highlightNode.className = 'red'
  highlightNode.textContent = item.highlight
  // 按顺序挂载节点到容器
  targetContainer.append(prefixNode, highlightNode)
})

这种实现的优势：所有写入的内容都会以纯文本形式被浏览器解析，不会被当成HTML执行，从根源规避XSS风险；数据和渲染逻辑完全解耦，后续调整文本、修改样式只需要改动对应的数据项或节点类名，不需要调整复杂的字符串拼接逻辑。

3. 低成本实现顺序轮播逻辑 #

如果需要按数组顺序依次切换展示内容，只需要维护固定的DOM结构，每次更新节点内容即可，不需要反复重绘整个容器：

let currentIndex = 0
// 只构造一次固定的DOM结构
const prefixNode = document.createTextNode('')
const highlightNode = document.createElement('span')
highlightNode.className = 'red'
targetContainer.append(prefixNode, highlightNode)

// 索引更新时同步修改展示内容
function refreshDisplay() {
  const currentItem = contentList[currentIndex % contentList.length]
  prefixNode.textContent = currentItem.prefix
  highlightNode.textContent = currentItem.highlight
  currentIndex += 1
}

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