如何将 append 字体真棒图标添加到容器

Question

I have a button that creates two input fields when someone clicks on the add button. I want to add a font awesome icon right next to the second input field. I tried adding it by using appendChild and innerHTML but that doesn't work at all I just don't get the icon rendered, how can I do it? Here is my code:

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>');

Answer 1

AppendChild expects a node to be passed not plain HTML.

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