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

Question

我有一个按钮，每次用户单击按钮时都会创建两个新的输入字段。 每次用户单击按钮时，我想在输入旁边创建一个很棒的字体图标。 它目前有效，但它只创建一次图标，我想在每次生成两个字段时添加一个图标。 我怎样才能做到这一点？ 这是我的尝试：

   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

您只看到一个图标的原因是每次单击时都会重新设置secondContainer的 HTML，而不是添加到它。 尝试更改此行：

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

进入这一行：

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

或者，或者，

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

请注意，虽然上述方法可行，但您也可以定义一个<i />元素，就像您对输入所做的那样，并将 append 元素定义为secondContainer 。