значения текстового поля исчезает, когда я добавить новый с 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>"; 

Это делает stringify (сериализации) РОВ #extraLink, добавить строку к нему, а затем разобрать его снова. Все значения в DOM (входы, пользовательские свойства, обработчики событий) будут потеряны. Вместо этого используйте надлежащие методы DOM, избегайте innerHTML!

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

Answer 2

Если вы работаете appendChild на DIV, или другой элемент, он становится частью из его innerHTML, однако значение не будет.

Try:

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