Двойная вставка после разрешена, но до не

Question

Двойная вставка после разрешена, но до не

0

Следующая 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 отправки неверна.

St.Antario 14 дек. 2013, в 01:45

Источник

Теги:

javascript

html

1 ответ

Ещё вопросы

Barmar · Accepted Answer · 2013-12-13T21-20-00.000Z

Когда вы выполните:

span.innerHTML = myKeys;

вы создаете еще один элемент с id="submit". В следующий раз, когда вы нажмете кнопку,

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

присваивает этот элемент переменной, а не той, что находится в исходном HTML. Этот элемент не является потомком child, так что вы получите сообщение об ошибке.

Версия с nextSibling также создает эти повторяющиеся идентификаторы, но исходный элемент submit ранее в DOM, чем добавленные элементы, поэтому он возвращается getElementById и вы не получаете ошибку. Я не думаю, что есть гарантии, что это сработает, поскольку дубликаты идентификаторов не разрешены, но это то, как работают большинство браузеров.

Если вы не хотите, чтобы строка, возвращаемая getAllKeyValuePairs анализировалась как HTML, назначьте ее span.innerText а не span.innerHTML.