javascript - 第二次单击按钮生成异常

Question

考虑以下 HTML

<div id="parent" class="parent">
    <div id="child" class="child">
        <input type="text" class="text"/>
        <input id="submit" value="submit" type="submit" onclick="doThis()"/>
    </div>
<div>

和JS代码

function doThis(){
    var span= document.createElement("span");
    var parent=document.getElementById("parent");
    var child=document.getElementById("child");
    var submit=document.getElementById("submit");
    child.insertBefore(span,submit);
    myKeys=[];
    myKeys.push(getAllKeyValuePair(submit));
    span.innerHTML=myKeys;
}
function getAllKeyValuePair(obj){
    var str="";
    for(var key in obj){
        try{
            str=str+"{"+key+", "+obj[key]+"}";
        }
        catch(e){
            console.log(key);
        }
    }
    return str;
}

JSFIDDLE 。第二次点击 submit按钮生成以下错误 Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.为什么会出现此错误？如何解决这个问题？

Answer 1

通过使用 innerHTML 插入函数 getAllKeyValuePair() 创建的数据，您还复制了以下代码

...}{outerHTML,
<input id="submit" type="submit" onclick="doThis()" value="submit">
}{...

它被 javascript 读取为另一个 id 为“submit”的元素重复标识符，当您尝试再次执行时导致错误

 var submit=document.getElementById("submit");
    child.insertBefore(span,submit);