Добрый день. Подскажите, пожалуйста - каким образом можно реализовать следующую задумку: Есть форма следующего содержания: HTML: <div class="for_cloning"> <form> <div class="for_cloning"> <span>Select an option:</span> <select name="main_select"> <option value="1">First option</option> <option value="2">Second option</option> <option value="3">Third option</option> </select> </div> </form> <button name="clone_btn"> Добавить новую строку </button> В див заключена строка, которую, при нажатии на кнопку, нужно разместить под существующей строкой, но так, чтобы она вставлялась внутрь формы под уже существующими строками. Каким образом можно это реализовать? Что мне почитать, чтобы в этом разобраться?
Код (Javascript): var div = document.getElementById("div"); var form = document.getElementById("form"); form.appendChild(div);
Если я Вас правильно понял, то код в результате должен быть таким: HTML: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function clone(){ var div = document.getElementById('obj'); var form = document.getElementById('form'); form.apperchild('obj'); } </script> </head> <body> <form id="form"> <div class="for_cloning" id = "obj"> <span>Select an option:</span> <select name="main_select"> <option value="1">First option</option> <option value="2">Second option</option> <option value="3">Third option</option> </select> <br> </div> </form> <input type="button" name="clone_btn" onclick="clone();" value="Добавить новую строку"> </body> </html> Однако - при клике на кнопку ничего не происходит. Возможно, я что-то сделал неправильно?
@Rexar_the_SMOrc Ну сделай так. Но ты ж понимаешь что у тебя и id и name и все остальное скопируется? Код (Javascript): var div = document.getElementById('obj').cloneNode(true); var form = document.getElementById('form'); form.appendChild(div) --- Добавлено --- а этого я точно не писал form.apperchild('obj');
Вообще в таких случаях используют мультиселект https://select2.org/getting-started/basic-usage#multi-select-boxes-pillbox