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"));

Answer 2

如果您在DIV或其他元素上运行appendChild，它将成为其innerHTML的一部分，但值不会。

尝试：

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

当我用javascript添加一个新文本时，textfield的值消失了

2 个答案: