Javascript 字段变为空白

这是一个简单的HTML页面，表单包含一些字段，我有一个scienario，表单中可以有多个字段，这就是为什么我创建了“添加新关系”按钮，当我们点击按钮时，它将一些字段添加到表单中，但旧字段变为空 这是代码

document.getElementById（'adRe'）.addEventListener（'click'，function（）{
if（document.getElementById（'rboxes'）.childElementCount<10）{
document.getElementById（'rboxes'）.innerHTML+='NameRelationshipTelephoneAddress'；
}否则{
警报（“您不能添加超过10个关系”）；
}
返回false；
});
功能rclose（a）{
a、 parentNode.parentNode.parentNode.removeChild（a.parentNode.parentNode）；
}

.rbox.rheader svg{
高度：39px；
浮动：对；
}

名称
关系
电话
地址
添加新关系
创造

只需使用insertAdjacentHTML函数插入新的HTML，因为设置innerHTML不会保留数据并重新加载元素

document.getElementById（'adRe'）.addEventListener（'click'，function（）{
if（document.getElementById（'rboxes'）.childElementCount<10）{
document.getElementById（'rboxes'）.insertAdjacentHTML（'beforeed'，'

名称关系电话地址

）；
}否则{
警报（“您不能添加超过10个关系”）；
}
});
功能rclose（a）{
a、 parentNode.parentNode.parentNode.removeChild（a.parentNode.parentNode）；
}

.rbox.rheader svg{
高度：39px；
浮动：对；
}

名称
关系
电话
地址
添加新关系
创造

+=

表示“读取此值，更改它，然后将新结果分配回”

使用

innerHTML

执行此操作时，将DOM序列化为HTML，更改HTML，然后从HTML创建新的DOM

由于表单控件的当前值未存储在HTML中，因此将丢失该值，并设置回默认值

不要为此使用

innerHTML

使用

createElement

、

appendChild

和friends向DOM添加新元素，而不使用它们的克隆覆盖旧元素。

这也是一本不错的读物：