Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как сделать перенес, при динамическом создании элемента? (https://javascript.ru/forum/events/67636-kak-sdelat-perenes-pri-dinamicheskom-sozdanii-ehlementa.html)

phenix79 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 28.02.2017 14:37

Цитата:

Сообщение от phenix79
Пытался сделать через
document.write("<br>")

Для начала почитай, что делает данный метод... :)
https://learn.javascript.ru/document-write
Цитата:

Сообщение от phenix79
как быть?

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

ksa 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 28.02.2017 15:18

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

phenix79 28.02.2017 15:19

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

phenix79 28.02.2017 15:32

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

ksa 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 28.02.2017 16:22

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

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

phenix79 02.03.2017 15:07

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

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


Часовой пояс GMT +3, время: 10:36.