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); （即在span按钮之前插入submit而不是之后）我们只能点击1次提交按钮。随后的点击将导致异常。的 JSFIDDLE

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

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。

允许双重插入，但不要之前

1 个答案: