以下 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
之后插入的情况下,它工作正常。我认为,重复提交按钮
的原因是不正确的。
最佳答案
当你这样做时:
span.innerHTML = myKeys;
您正在使用 id="submit"
创建另一个元素。下次单击该按钮时,
var submit = document.getElementById("submit");
将此元素分配给变量,而不是原始 HTML 中的变量。该元素不是 child
的子元素,所以你会得到一个错误。
带有 nextSibling
的版本也会创建这些重复的 ID,但原始的 submit
元素在 DOM 中比添加的元素更早,因此它由 getElementById
返回。并且你不会收到错误。我认为不能保证这会起作用,因为不允许重复的 ID,但这就是大多数浏览器的工作方式。
如果您不想要 getAllKeyValuePairs
返回的字符串要解析为 HTML,请将其分配给 span.innerText
而不是span.innerHTML
.
关于javascript - 允许在之后重复插入,但在之前则不允许,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20578004/