Как сделать перенос, при динамическом создании элемента?
Доброго времени суток уважаемые форумчане.
Подскажите пожалуйста как сделать перенос, между создаваемыми динамически элементами? Имею такой код:
<!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, время: 01:05. |