使用PapaParse将CSV转JSON后，如何在map渲染时为type为Composition的条目加斜体

实现方法 #

所有DOM节点都是通过模板字符串动态生成的，无需等元素渲染完成后再执行DOM查询操作，直接在map回调生成HTML的阶段做条件判断即可，逻辑最简洁、性能最优。

方案1：动态添加自定义CSS类（推荐） #

样式与结构分离更易维护：

• 完全移除冗余的dataTypeComposition变量，该变量仅在遍历中打印匹配的piece值，无有效返回值，属于多余逻辑
• 在生成piece对应段落的模板字符串中，根据data.type的判断结果动态拼接类名
• 在全局CSS中定义对应斜体样式

/* 全局CSS文件中新增 */
.composition-italic {
  font-style: italic;
}

修改后的showInfo函数完整代码：

function showInfo(results) {
  const data = results.data
  const allData = data.map(data => `
    <div class="past-performances">
      <div class="datesAndLocations">
        <p class="dates"> ${data.date}</p>
        <p class="locations"> ${data.location} </p>
      </div>
      <div class="piecesAndDescripts">
        <p class="pieces ${data.type === 'Composition' ? 'composition-italic' : ''}">
          ${data.piece}
        </p>
        <p class="descriptions"> ${data.description} </p>
      </div>
      <br>
    </div>
  `)
  document.getElementById("list-container").innerHTML = allData.join(" ")
}

方案2：动态拼接内联样式 #

如果不想额外编写CSS类，可直接在生成标签时动态写入内联样式，对应的piece段落代码修改为：

<p 
  class="pieces" 
  style="${data.type === 'Composition' ? 'font-style: italic' : ''}"
>
  ${data.piece}
</p>

不建议等所有节点渲染完成后，再通过DOM选择器批量查询匹配项并修改样式。这种实现需要等innerHTML插入完成后，重新遍历DOM节点做匹配，会额外增加一次DOM重查询、页面重排的性能开销，代码逻辑也更冗余。

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