Как по клику клонировать предыдущий элемента?

Question

[pashabomber]

Добрый день!

Суть задачи следующая. Есть блок, в котором находится текстовое поле. За ним идет ссылка "Добавить еще". По клику перед этой ссылкой появляется еще одно такое же текстовое поле. И так можно сделать бесконечное количество раз. Подскажите, как это реализовать?

Answer 1

[Andrey Tsvetkov]

document.querySelector("button").addEventListener("click", function (e) {
    e.target.parentNode.insertBefore(document.createElement("div"), e.target).innerText = "Какой-то текст нового блока";
})

Comments

[pashabomber]

Мне надо, чтобы именно предыдущий элемент клонировался, а не вставлялся див с текстом. Потому что перед ссылкой может быть текстовое поле, может быть селект, может быть какой-то другой элемент формы.

[Andrey Tsvetkov]

document.querySelector("button").addEventListener("click", function (e) {
    var elem = e.target.previousSibling;
    while(elem.nodeType != Node.ELEMENT_NODE) {
        elem = elem.previousSibling;
    }
    e.target.parentNode.insertBefore(elem.cloneNode(true), e.target);
})

[pashabomber]

Andrey Tsvetkov, спасибо огромное)

[pashabomber]

Andrey Tsvetkov, А не подскажете, почему если вставить конструкцию такую в документ несколько раз, то срабатывает только в самой первой? Как сделать, чтобы срабатывало в любой?

[Andrey Tsvetkov]

Нужно просто все кнопки подписать на данное событие. Ну или сделайте примерно вот так:

function clonePreviousElement(btn) {
    var elem = btn.previousSibling;
    while(elem.nodeType != Node.ELEMENT_NODE) {
        elem = elem.previousSibling;
    }
    btn.parentNode.insertBefore(elem.cloneNode(true), btn);
}

а кнопки вставляйте примерно вот так

<button onclick="clonePreviousElement(this)"></button>