Javascript 为什么我的输入'；附加子对象时是否清除s值？

当我在

div

中附加一个元素时，我遇到了问题，我输入的所有值（包括所选选项）都被清除，如下所示：

正如我单击按钮“Añadir tecla”时所看到的，文本框中的文本和所选选项“Shift”返回到默认选项“Flechas de moviminto”

为什么会发生这种情况，我如何避免

我的代码是下一个：

var controls = [{value: "flechas", text: "Flechas de movimiento"}, {value: "letras", text: "Letras (WASD)"}, {value: "enter", text: "Enter"}, {value: "control", text: "Ctrl"}, {value: "alt", text: "Alt"}, {value: "espacio", text: "Espacio"}, {value: "der", text: "Click derecho"}, {value: "izq", text: "Click izquierdo"}, {value: "mover", text: "Mover el ratón"}, {value: "shift", text: "Shift"}, {value: "customkey", text: "Especificar tecla"}];

function addControl(e) 
{
    e.appendChild(getControlSelect());
}

function getControlSelect() 
{
    var select = document.createElement('select'),
        option,
        i = 0,
        il = controls.length,
        html = document.createElement('div'),
        text = document.createElement('input'),
        delbtn = document.createElement('input');

    text.type = "text";

    delbtn.type = "button";
    delbtn.value = "-";

    for (; i < il; ++i)
    {
        option = document.createElement('option');
        option.setAttribute('value', controls[i].value);
        option.appendChild(document.createTextNode(controls[i].text));
        select.appendChild(option);
    }
    html.innerHTML += "<b>Tecla</b><br>";
    html.appendChild(select);
    html.innerHTML += "<br><b>Acción</b><br>";
    html.appendChild(text);
    html.appendChild(delbtn);

    return html;
}

---

问题在于您覆盖了HTML代码

element.innerHTML += newHTML;

这将消除当前元素的状态，包括事件侦听器、输入值、检查性等

相反，您应该使用

appendChild

或

insertAdjacentHTML

：

element.insertAdjacentHTML('beforeend', newHTML);

var controls=[{value:“flechas”，text:“flechas de moviminto”}，{value:“letras”，text:“letras（WASD）”}，{value:“enter”，text:“enter”}，{value:“control”，text:“Ctrl”}，{value:“alt”，text:“alt”}，{value:“espacio”}，{value:“der”，text:“Click derecho”}，{value:“izq”，text:“Click:“Click izquierdo”}，{value:“mover”，text:“Mover el ratón”}，{value:“shift”，text:“shift”}，{value:“customkey”，text:“specifical tecla”}，
跳过索引=[]，
sep=”“，
oldIndex=0；//，
//sInd=0；
函数addControl（e）{
如果（e.lastChild.className！=“sep”）e.innerHTML+=sep；
e、 appendChild（getControlSelect（））；
e、 insertAdjacentHTML（'beforeend'，sep.replace（'id='firstsep''”））；
}
函数onSelectChange（e）{}
函数deleteFirstSep（）{
如果（！document.getElementById（“firstsep”）.nextSibling）document.getElementById（“firstsep”）.remove（）；
}
函数getControlSelect（）{
var select=document.createElement（'select'），
选项
i=0，
il=控制长度，
html=document.createElement（'div'），
text=document.createElement（'input'），
delbtn=document.createElement（'input'），
ascinpt=document.createElement（'input'），
html1=document.createElement（'div'）；
html1.style.display=“内联块”；
text.type=“text”；
text.name=“accion[]”；
text.style.width=“158px”；
delbtn.type=“按钮”；
delbtn.setAttribute（'onclick'，'var e=this.parentNode；e.nextSibling.remove（）；e.remove（）；deleteFirstSep（）；'）；
delbtn.value=“-”；
delbtn.style.padding=“0 5px”；
delbtn.style.marginLeft=“5px”；
delbtn.style.position=“相对”；
delbtn.style.top=“-20px”；
delbtn.style.left=“2px”；
ascinpt.name=“tecla[]”；
ascinpt.type=“隐藏”；
select.id=“htmlkey”；
select.dataset.associatedInput=ascinpt；
//选择.dataset.i=sInd；
//sInd++；
select.setAttribute（“onchange”、“onSelectChange（this）”）；
对于（；i”）；
html1.appendChild（选择）；
html1.insertAdjacentHTML（'beforeed'，“
Acción
”；
html1.appendChild（文本）；
appendChild（html1）；
appendChild（delbtn）；
返回html；
}

.sep{
边框顶部：4个虚线#A4A4A4；
利润率：15px 0 15px 0；
}

您的代码对我来说运行得非常完美，当我单击按钮时，没有任何输入会丢失其值。你确定没有其他javascript事件触发会影响这一点吗？好的。我忘了说我有

select.setAttribute（“onchange”，“onSelectChange（this）”）。因此，当我更改值时，我调用一个空函数，但是，删除此代码行时，同样的情况也会发生。也许是浏览器？我使用的是Chrome 46。它对我来说也很好。你是否尝试过刷新浏览器或清除缓存？您可能正在提供仍在加载您删除的代码的缓存内容。发生这种情况是因为您正在重写容器元素的html。这样，活动属性就会丢失。您应该在内存中创建一个元素并附加它，而不是重写实际的html属性。谢谢您的建议！你能给出一些改进我的代码组织的建议吗？@ IKILUKEKS，而不是从头开始重建新的控件，考虑用“代码> C克隆No/Cuth>克隆现有的控件。避免内联样式，而是添加一个类并在样式表中定义它们。避免使用需要全局函数的事件处理程序内容属性，请使用事件处理程序IDL属性或事件侦听器。你可以发布你的代码以获得更多建议。
element.insertAdjacentHTML('beforeend', newHTML);