JavaScript调用appendChild报错参数1非Node类型：FontAwesome星级显示问题

• 错误触发的核心原因：appendChild方法要求传入参数为DOM节点类型，但你传入的是字符串。代码中(document.createElement("p").innerHTML = )属于赋值表达式，返回值为等号右侧的HTML字符串，而非你创建的<p>节点，因此触发类型报错。
• 额外逻辑问题：你在循环前已经给note.innerHTML赋值了1个星星，循环又会新增res.rating.value个星星，最终渲染的星星数量会比预期多1，不符合需求。
• 冗余DOM问题：星星图标不需要额外嵌套<p>标签，会增加不必要的DOM层级。

方案1：简洁innerHTML拼接实现（适合少量星星场景） #

if (res.rating.value != null) {
  // 先清空原有内容
  note.innerHTML = ''
  for (let i = 0; i < res.rating.value; i++) {
    note.innerHTML += `<i class="fa-regular fa-star"></i>`
  }
} else {
  note.innerHTML = `not rated`
}

方案2：标准DOM节点操作实现（性能更优，适合大量星星场景） #

if (res.rating.value != null) {
  // 先清空原有内容
  note.innerHTML = ''
  for (let i = 0; i < res.rating.value; i++) {
    const starElement = document.createElement('i')
    starElement.className = 'fa-regular fa-star'
    note.appendChild(starElement)
  }
} else {
  note.innerHTML = `not rated`
}

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