Следующая 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
отправки неверна.
Когда вы выполните:
span.innerHTML = myKeys;
вы создаете еще один элемент с id="submit"
. В следующий раз, когда вы нажмете кнопку,
var submit = document.getElementById("submit");
присваивает этот элемент переменной, а не той, что находится в исходном HTML. Этот элемент не является потомком child
, так что вы получите сообщение об ошибке.
Версия с nextSibling
также создает эти повторяющиеся идентификаторы, но исходный элемент submit
ранее в DOM, чем добавленные элементы, поэтому он возвращается getElementById
и вы не получаете ошибку. Я не думаю, что есть гарантии, что это сработает, поскольку дубликаты идентификаторов не разрешены, но это то, как работают большинство браузеров.
Если вы не хотите, чтобы строка, возвращаемая getAllKeyValuePairs
анализировалась как HTML, назначьте ее span.innerText
а не span.innerHTML
.