Форум

phenix79 · #1 (**permalink**) 28.02.2017, 14:22

Доброго времени суток уважаемые форумчане.
Подскажите пожалуйста как сделать перенос, между создаваемыми динамически элементами?
Имею такой код:

<!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>")

Но у меня все исчезает со странички, и страница виснет.
Будьте добры подскажите как быть?
Спасибо!!!

ksa · #2 (**permalink**) 28.02.2017, 14:37

Сообщение от phenix79

Пытался сделать через

document.write("<br>")

Для начала почитай, что делает данный метод...

https://learn.javascript.ru/document-write

Сообщение от phenix79

как быть?

Есть несколько вариантов
- использовать ЦСС
- обернуть все новые элементы в блочные элементы
- создавать элемент <br /> и вставлять его перед новым элементом

ksa · #3 (**permalink**) 28.02.2017, 14:44

Сообщение от ksa

использовать ЦСС

Как вариант...

<!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>

phenix79 · #4 (**permalink**) 28.02.2017, 15:18

Обертывать все в новые блочные элементы не считаю целесообразным, потому как, элементы данной формы будут отправляться методом POST в PHP файл, попытался создать новые элементы BR все работает спасибо, но не хотелось бы чтобы лишние элементы типа DIV или BR присутствовали в форме.
А каким образом можно реализовать через CSS, хотя бы маленький пример?
Спасибо!!

phenix79 · #5 (**permalink**) 28.02.2017, 15:19

Вот вариант с CSS, ))Вот это то что надо.Спасибо большое!!))

phenix79 · #6 (**permalink**) 28.02.2017, 15:32

Ещё один вопрос возник.
Допустим мы не будем знать сколько элементов формы будет создаваться, может 5, а может 10, как получится.
Как сделать так чтобы для каждого созданного INPUTа присваивался определенный ID ?
Допустим я создал через кнопку 5 элементов,
и хочу чтобы им присвоились например такие ID:
MyInput1
MyInput2
MyInput3
MyInput4
MyInput5
Как это сделать?

ksa · #7 (**permalink**) 28.02.2017, 16:06

Сообщение от phenix79

не хотелось бы чтобы лишние элементы типа DIV или BR присутствовали в форме

В них нет ничего страшного...

Сообщение от phenix79

Как сделать так чтобы для каждого созданного INPUTа присваивался определенный ID ?

Менять соответствующее свойство...

<!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>

phenix79 · #8 (**permalink**) 28.02.2017, 16:22

Спасибо огромное, а как перед каждым элементом INPUT, можно вставлять так же автоматически текст?
К примеру:
Вопрос 1 - INPUT
Вопрос 2 - INPUT
Вопрос 3 - INPUT

Я хочу опросник сделать, чтобы появлялось наименование вопроса а потом текстовое поле.
Пробовал так заключить форму в тег DIV а потом div.InnerHtml = 'Какой то текст'
Чтобы появлялся новый INPUT а перед ним текст
но при нажатии на кнопку он виснет и ничего не происходит.
Подскажите как реализовать это??
Спасибо!

phenix79 · #9 (**permalink**) 02.03.2017, 15:07

Люди добрые, ну подскажите если кто то знает как это сделать?
Уже день ломаю голову, ничего не могу сделать.
Спасибо заранее!!

ksa · #10 (**permalink**) 02.03.2017, 15:21

Сообщение от phenix79

а как перед каждым элементом INPUT, можно вставлять так же автоматически текст?
К примеру:
Вопрос 1 - INPUT
Вопрос 2 - INPUT
Вопрос 3 - 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>

Форум

Справочник

Discord чат

Курсы javascript