如何用JavaScript在输入框验证通过后添加指定Font Awesome图标

• <input> 属于自闭合标签，不支持嵌套子元素，你原有代码中直接调用 inp.appendChild(icon) 是无效操作，图标无法渲染到页面上。
• 没有做重复图标校验，每次输入框失焦如果验证通过都会重复生成新的图标。
• 未处理验证失败后的图标清除逻辑：如果用户先填了内容显示图标，之后清空输入，背景变红后图标依然会残留。

JavaScript代码 #

document.querySelectorAll('input').forEach((inp) => {
  inp.addEventListener('focusout', () => {
    // 去除输入内容中所有空格后判断是否为空
    const trimedValue = inp.value.replaceAll(' ', '')
    // 查找当前输入框旁是否已经存在对勾图标
    const existCheckIcon = inp.nextElementSibling?.classList.contains('fa-check-circle') ? inp.nextElementSibling : null

    if (trimedValue === '') {
      inp.style.backgroundColor = "red";
      // 验证不通过时清除残留的对勾图标
      existCheckIcon?.remove()
    } else {
      inp.style.backgroundColor = "green";
      // 仅当没有已存在的图标时才新增
      if (!existCheckIcon) {
        const checkIcon = document.createElement('i')
        checkIcon.classList.add('fas', 'fa-check-circle')
        // 将图标直接插入到输入框的后方
        inp.after(checkIcon)
      }
    }
  })
})

可选样式调整（可按需修改） #

/* 调整对勾图标位置和样式 */
.fa-check-circle {
  color: #ffffff;
  margin-left: 10px;
  vertical-align: middle;
}

• 用 inp.after(icon) 代替原有的 inp.appendChild(icon)，将图标插入到输入框的同级后方，符合DOM节点插入规则。
• 新增图标存在性判断，避免多次失焦重复生成图标。
• 补充验证失败后的图标清除逻辑，保证状态统一。

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