javascript - 当我使用 javascript 添加新文本字段时，文本字段的值消失

Question

我使用 javascript 动态地将文本字段添加到 div

function moreLink(){
//gco is global, starts from 1, limit of textfields added is 10

if (gco!=10){
    var newLinkb=[];

        document.getElementById("extraLink").innerHTML+="<br>";
    newLinkb[gco]= document.createElement('input');
    newLinkb[gco].setAttribute('type','text');
    newLinkb[gco].setAttribute('id',gco);        
    document.getElementById("extraLink").appendChild(newLinkb[gco]);            

    gco++;

        }

else{ alert ('sorry, cannot add more, limit is 10');
      }

}

因此，当我点击右侧按钮时，调用 moreLink 函数来添加新的文本字段输入类型。

问题是，如果我在第一个文本字段中写一些内容并点击按钮，则会出现第二个文本字段，但第一个文本字段中的文本(值)会消失。

如何解决这个问题？

谢谢

Answer 1

document.getElementById("extraLink").innerHTML+="<br>";

这会将 #extraLink 的 DOM 字符串化(序列化)，向其中附加一个字符串，然后再次解析它。 DOM 中的所有值(输入、自定义属性、事件处理程序)都将丢失。相反，请使用正确的 DOM 方法，避免 innerHTML!

document.getElementById("extraLink").appendChild(document.createElement("br"));