JS для добавления новой формы динамически

Question

Я работаю над Laravel 5.7 и мне нужен скрипт для добавления новой формы при нажатии кнопки плюс.

Я нашел этот скрипт, но он только добавляет поля ввода, мне нужно добавить всю форму

 $(document).ready(function () {
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function (e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div id="post"><input type="text" name="options[]" class="form-control"><input type="text" name="options[]" class="form-control"></div><br>'); //add input box
            }
        });

Answer 1

Вы захотите взглянуть на несколько методов JS для этого ...

createElement () - это создает HTML-элемент DOM.Например ...

let myDiv = document.createElement('div');

После того, как вы создали элемент, он будет находиться в эфире до тех пор, пока вы фактически не поместите его на страницу.Вот тут-то и начинает воспроизводиться метод наподобие appendChild () ...

document.querySelector('someElement').appendChild(myDiv);
// This will append the myDiv element you created to your someElement

Вы также можете создавать текст с помощью createTextNode ('ваш текст') и добавлять его таким же образом.Существует также метод setAttribute (), который принимает два параметра ... первый - это атрибут для установки, а второй - значение для его установки.

Answer 2

Не вводите dom-элементы через javascript, это не очень хорошая практика. Как уже упоминалось выше, посмотрите на руль, где вы можете сохранить шаблон формы в своем собственном файле. Также vue.js был бы хорошим выбором, если у вас есть больше, чем просто создание формы.