每次点击如何在js中动态添加字体真棒图标

Question

I have a button that creates two new inputs fields each time the user clicks on a button. I want to create a font awesome icon next to the inputs each time the user clicks on the button. It works currently but it creates an icon just once and I want to add an icon for each time the two fields are generated. How can I achieve this? Here is my attempt:

   createNewPricedRoundShareholder() {
      var newPlatformNameInputContainer = document.getElementById(
        "round-shareholder-container"
      );

      const newPlatformNameInput = document.createElement("input");
      newPlatformNameInput.classList.add("form-control");
      newPlatformNameInput.classList.add("input");
      newPlatformNameInput.placeholder = "Username";
      newPlatformNameInput.setAttribute("type", "text");
      newPlatformNameInput.setAttribute("name", "username");

      newPlatformNameInputContainer.appendChild(newPlatformNameInput);

      var secondContainer = document.getElementById(
        "round-investment-container"
      );

      const newInitialOptionsPool = document.createElement("input");
      newInitialOptionsPool.classList.add("form-control");
      newInitialOptionsPool.classList.add("input");
      newInitialOptionsPool.placeholder = "Investment";
      newInitialOptionsPool.name = "investment";
      newInitialOptionsPool.setAttribute("type", "text");
      newInitialOptionsPool.setAttribute("name", "investment");
      secondContainer.appendChild(newInitialOptionsPool);
      secondContainer.innerHTML = '<i class="fas fa-trash"></i>';
    }

Answer 1

The reason you're only seeing one icon is that on every click you re-set secondContainer 's HTML, instead of adding to it. Try changing this line:

secondContainer.innerHTML = '<i class="fas fa-trash"></i>';

Into this line:

secondContainer.innerHTML = secondContainer.innerHTML + '<i class="fas fa-trash"></i>';

Or, alternatively,

secondContainer.innerHTML += '<i class="fas fa-trash"></i>';

Please note, that while the above will work, you could also define an <i /> element just liek you did with the inputs, and append the element to secondContainer .