Как на JQuery по мере ввода информации пользователем добавить новый элемент на страницу

Небольшая заметка о том, как динамически добавлять элементы формы с использованием JQuery / JavaScript. Это полезно, когда DOM уже загружен, и вы должны добавить дополнительный элемент, полагаясь на действия пользователей (событие change). Разумееется так вы можете вставлять на страницу любые новые элементы формы, а не только поля ввода. В качестве альтернативы вы также можете создать форму входа на странице и просто скрыть её, а затем показать, когда она потребуются.

Пример:  добавим поле подтверждения пароля confirm_password, когда пользователь уже заполнил поле ввода пароля password.

JavaScript:

jQuery(document).ready(function($) {

    var passwordField = $('#password');
    // При выборе поля password добавляет второй инпут:
    passwordField.one('change', function() {
        // Динамическая генерация нового поля ввода и вставка его после password:
        $("<input type='password' name='confirm_password' id='confirm_password' value='' />").insertAfter(passwordField);
    });

});

HTML:

<input type="password" id="password" value="" name="password" />

Подтверждение пароля будет добавлено только 1 раз благодаря методу .one().