如何在每次点击的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 />元素，就像您对输入所做的那样，并将该元素附加到secondContainer中。