当我点击一个按钮时，我的输入标签变为空

Question

我制作了一个表单，当我单击按钮时添加了一些输入。 此按钮的功能是使用javascript制作的。

但是，当我单击它时，我所有的输入都变为空，我不希望这样。 我想将信息保留在已有的输入中。

怎么了，我该如何解决？

 var div = document.getElementById('participant'); function AjoutParticipant() { var ex = document.getElementsByClassName("bouton_plus"); for (i = 0; i < ex.length; i++) { ex[i].style.display = "none"; } div.innerHTML += '<label>Nom :</label><input type="text" name="nom[]" />' + '<label id="pre-decal">Prenom :</label><input type="text" name="prenom[]" />' + '<label id="ent-decal">Entreprise :</label><input type="text" name="entreprise" /><br/>' + '<button class="bouton_plus" type="button" onclick="AjoutParticipant()"><i class="fa fa-fw fa-plus"></i> Ajouter Participant</button>' } 

 <fieldset id="participant"> <legend>Participant(s)</legend> <label>Nom :</label><input type="text" name="nom[]" /> <label>Prenom :</label><input type="text" name="prenom[]" /> <label>Entreprise :</label><input type="text" name="entreprise" /><br/> <button class="bouton_plus" type="button" onclick="AjoutParticipant()"><i class="fa fa-fw fa-plus"></i> Ajouter Participant</button> </fieldset> 

Answer 1

您正在获取div的innerHTML ，向其添加一些新的HTML，然后将其分配回去。

HTML中的value 属性表示默认值，因此当用户在其中输入内容时不会更新。

因此，当您覆盖innerHTML时， innerHTML输入重置为默认值。

---

不要使用innerHTML 。

相反，可以使用诸如createElement和appendChild类的DOM方法将新内容添加到div中，而无需重写现有内容。