Как сделать перенос, при динамическом создании элемента?
Доброго времени суток уважаемые форумчане.
Подскажите пожалуйста как сделать перенос, между создаваемыми динамически элементами? Имею такой код: <!DOCTYPE html> <html> <body> <p>Click the button to make a BUTTON element.</p> <button onclick="myFunction()">Try it</button> <form id="MyForm"> </form> <script> function myFunction() { var btn = document.createElement("input"); document.getElementById('MyForm').appendChild(btn); //document.body.appendChild(btn); } </script> </body> </html> При нажатии на кнопку создаются элементы формы,внутри формы "MyForm" но они создаются друг за другом в горизонтальном направлении, а мне нужно чтобы при создании нового элемента происходил перенос на новую строку и новый элемент создавался бы внизу. Подскажите как это реализовать? Пытался сделать через document.write("<br>") Но у меня все исчезает со странички, и страница виснет. Будьте добры подскажите как быть? Спасибо!!! |
Цитата:
https://learn.javascript.ru/document-write Цитата:
- использовать ЦСС - обернуть все новые элементы в блочные элементы - создавать элемент <br /> и вставлять его перед новым элементом |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <!-- <script src='http://code.jquery.com/jquery-latest.js'></script> <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> #MyForm > input { float: left; clear: both; } </style> <script type='text/javascript'> function myFunction() { var btn = document.createElement("input"); document.getElementById('MyForm').appendChild(btn); } </script> </head> <body> <p>Click the button to make a BUTTON element.</p> <button onclick="myFunction()">Try it</button> <form id="MyForm"></form> </body> </html> |
Обертывать все в новые блочные элементы не считаю целесообразным, потому как, элементы данной формы будут отправляться методом POST в PHP файл, попытался создать новые элементы BR все работает спасибо, но не хотелось бы чтобы лишние элементы типа DIV или BR присутствовали в форме.
А каким образом можно реализовать через CSS, хотя бы маленький пример? Спасибо!! |
Вот вариант с CSS, ))Вот это то что надо.Спасибо большое!!))
|
Ещё один вопрос возник.
Допустим мы не будем знать сколько элементов формы будет создаваться, может 5, а может 10, как получится. Как сделать так чтобы для каждого созданного INPUTа присваивался определенный ID ? Допустим я создал через кнопку 5 элементов, и хочу чтобы им присвоились например такие ID: MyInput1 MyInput2 MyInput3 MyInput4 MyInput5 Как это сделать? |
Цитата:
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <!-- <script src='http://code.jquery.com/jquery-latest.js'></script> <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> #MyForm > input { float: left; clear: both; } </style> <script type='text/javascript'> function myFunction() { var btn = document.createElement("input"); btn.id='MyInput'+document.querySelectorAll('#MyForm > input').length; document.getElementById('MyForm').appendChild(btn); } </script> </head> <body> <p>Click the button to make a BUTTON element.</p> <button onclick="myFunction()">Try it</button> <form id="MyForm"></form> </body> </html> |
Спасибо огромное, а как перед каждым элементом INPUT, можно вставлять так же автоматически текст?
К примеру: Вопрос 1 - INPUT Вопрос 2 - INPUT Вопрос 3 - INPUT Я хочу опросник сделать, чтобы появлялось наименование вопроса а потом текстовое поле. Пробовал так заключить форму в тег DIV а потом div.InnerHtml = 'Какой то текст' Чтобы появлялся новый INPUT а перед ним текст но при нажатии на кнопку он виснет и ничего не происходит. Подскажите как реализовать это?? Спасибо! |
Люди добрые, ну подскажите если кто то знает как это сделать?
Уже день ломаю голову, ничего не могу сделать. Спасибо заранее!! |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <!-- <script src='http://code.jquery.com/jquery-latest.js'></script> <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> #MyForm > label { display: block; } </style> <script type='text/javascript'> function myFunction() { var ol = document.createElement("label"); var btn = document.createElement("input"); var i=document.querySelectorAll('#MyForm input').length; ol.innerHTML='Вопрос '+(i+1)+' '; btn.id='MyInput'+i; ol.appendChild(btn); document.getElementById('MyForm').appendChild(ol); } </script> </head> <body> <p>Click the button to make a BUTTON element.</p> <button onclick="myFunction()">Try it</button> <form id="MyForm"></form> </body> </html> |
Спасибо огроменное добрый человек!!!!Дело в том что с JAVASCRIPT только знакомлюсь, и не всегда все получается.
Спасибо!!!!!!!!!!!!!!!!!! |
Часовой пояс GMT +3, время: 14:27. |