Javascript 如何将字体图标附加到容器中

我有一个按钮，当有人单击add按钮时，它会创建两个输入字段。我想在第二个输入字段旁边添加一个字体图标。我尝试使用

appendChild

和

innerHTML

添加它，但这根本不起作用我只是没有渲染图标，我该怎么做？这是我的密码：

const mainParent = document.getElementById('main-parent');

  const newPlatformNameInput1 = document.createElement("input");
  newPlatformNameInput1.id = index + '_first';
  newPlatformNameInput1.classList.add("form-control");
  newPlatformNameInput1.classList.add("input");
  const newPlatformNameInput2 = document.createElement("input");
  newPlatformNameInput2.id = index + '_second';
  newPlatformNameInput2.classList.add("form-control");
  newPlatformNameInput2.classList.add("input");


  const wrapperParent = document.createElement('div');
  wrapperParent.id = index + '_parent';
  wrapperParent.appendChild(newPlatformNameInput1);
  wrapperParent.appendChild(newPlatformNameInput2);

  mainParent.appendChild(wrapperParent);
  mainParent.appendChild('<i class="fas fa-trash"></i>');

const mainParent=document.getElementById（'main-parent'）；
const newPlatformNameInput1=document.createElement（“输入”）；
newPlatformNameInput1.id=index+“_first”；
newPlatformNameInput1.classList.add（“表单控件”）；
newPlatformNameInput1.classList.add（“输入”）；
const newPlatformNameInput2=document.createElement（“输入”）；
newPlatformNameInput2.id=index+“_second”；
newPlatformNameInput2.classList.add（“表单控件”）；
newPlatformNameInput2.classList.add（“输入”）；
const wrapperpparent=document.createElement（'div'）；
wrapperParent.id=index+''u parent'；
wrapperParent.appendChild（newPlatformNameInput1）；
apperParent.appendChild（newPlatformNameInput2）；
mainParent.appendChild（包装父对象）；
mainParent.appendChild（“”）；

AppendChild希望传递的节点不是普通的HTML

icon = document.createElement("i");
icon.setAttribute("class","fas fa-trash");
mainParent.appendChild(icon);

---

为什么不按照您所遵循的方法添加其他元素，创建一个

i

元素，适当地设置其类，然后附加它呢？我没有否决，但在示例代码中，您正在做一些令人困惑的事情——您放弃了适用于所有以前代码的方法，尝试了一些不支持的方法——即，向它传递一个html字符串。看来你可能把它和我搞混了。从表面上看，你可能不理解你发布的代码，这可能被解释为缺乏研究。我也没有投反对票，但人们试图声称这是一个打字错误。虽然我相信这不是一次打字错误，而是一次学习经验，了解

appendChild

希望传递的内容。