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.nextSibling);
    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例子。它工作正常，可以在提交按钮上单击 2,3 次，...等等，单击重复的提交按钮...等等。但是如果我们尝试替换 child.insertBefore(span,submit. nextSibling); 到 child.insertBefore(span,submit); (即在 submit 按钮之前而不是之后插入 span)只能点击1次提交按钮。后续点击会引发异常。 <强> JSFIDDLE

问题显然是，为什么在 submit 之前插入的情况下，随后的点击会导致异常，但在 submit 之后插入的情况下，它工作正常。我认为，重复提交按钮的原因是不正确的。

Answer 1

当你这样做时:

span.innerHTML = myKeys;

您正在使用 id="submit" 创建另一个元素。下次单击该按钮时，

var submit = document.getElementById("submit");

将此元素分配给变量，而不是原始 HTML 中的变量。该元素不是 child 的子元素，所以你会得到一个错误。

带有 nextSibling 的版本也会创建这些重复的 ID，但原始的 submit元素在 DOM 中比添加的元素更早，因此它由 getElementById 返回。并且你不会收到错误。我认为不能保证这会起作用，因为不允许重复的 ID，但这就是大多数浏览器的工作方式。

如果您不想要 getAllKeyValuePairs 返回的字符串要解析为 HTML，请将其分配给 span.innerText而不是span.innerHTML .