Второй щелчок кнопки генерирует исключение

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 в качестве еще одного элемента с идентификатором «представить» дублируя идентификатор, в результате чего ошибка при попытке выполнить еще раз

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

Answer 2

Вашей линия span.innerHTML=myKeys; вызывает проблему, поскольку она вызывает дублирование кнопки отправки элемента на странице. Просто измените span.innerHTML=myKeys; на span.textContent = myKeys;, и он должен работать нормально.

jsFiddle example