如何将Spoonacular API返回的菜谱标题包裹<p>和<a>标签插入innerHTML

算力阿峰

2026-8-16

解决Spoonacular API菜谱标题的HTML标签包裹问题

问题核心

你之前的模板字符串语法错误，导致无法正确生成带标签的HTML内容，同时需要为每个菜谱标题添加对应链接。

正确代码实现

使用**模板字符串（反引号`包裹）**来正确拼接HTML标签与变量，同时利用菜谱的id构造标准的Spoonacular菜谱链接：

let recipeTitles = function(){
  return data.map(el => `
    <p>
      <a href="https://spoonacular.com/recipes/${el.title.replace(/\s+/g, '-')}-${el.id}" target="_blank">
        ${el.title}
      </a>
    </p>
  `).join('')
}

document.querySelector('#recipeTitle').innerHTML = recipeTitles()

错误原因说明

你之前的两种写法都存在语法问题：

return data.map(el => <p>${el.title}</p>).join('')：未用反引号包裹HTML片段，JS会将<p>识别为未定义变量，直接触发语法错误。
return data.map(el =>
${el.title}
).join('')：错误拆分了模板字符串，反引号必须成对包裹整个待拼接内容，不能在中间断开。