Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.02.2017, 14:22
Аспирант
Отправить личное сообщение для phenix79 Посмотреть профиль Найти все сообщения от phenix79
 
Регистрация: 19.12.2011
Сообщений: 40

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

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

Последний раз редактировалось phenix79, 28.02.2017 в 14:41.
Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2017, 14:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,437

Сообщение от phenix79
Пытался сделать через
document.write("<br>")
Для начала почитай, что делает данный метод...
https://learn.javascript.ru/document-write
Сообщение от phenix79
как быть?
Есть несколько вариантов
- использовать ЦСС
- обернуть все новые элементы в блочные элементы
- создавать элемент <br /> и вставлять его перед новым элементом
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2017, 14:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,437

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 28.02.2017, 15:18
Аспирант
Отправить личное сообщение для phenix79 Посмотреть профиль Найти все сообщения от phenix79
 
Регистрация: 19.12.2011
Сообщений: 40

Обертывать все в новые блочные элементы не считаю целесообразным, потому как, элементы данной формы будут отправляться методом POST в PHP файл, попытался создать новые элементы BR все работает спасибо, но не хотелось бы чтобы лишние элементы типа DIV или BR присутствовали в форме.
А каким образом можно реализовать через CSS, хотя бы маленький пример?
Спасибо!!
Ответить с цитированием
  #5 (permalink)  
Старый 28.02.2017, 15:19
Аспирант
Отправить личное сообщение для phenix79 Посмотреть профиль Найти все сообщения от phenix79
 
Регистрация: 19.12.2011
Сообщений: 40

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

Последний раз редактировалось phenix79, 28.02.2017 в 15:22.
Ответить с цитированием
  #6 (permalink)  
Старый 28.02.2017, 15:32
Аспирант
Отправить личное сообщение для phenix79 Посмотреть профиль Найти все сообщения от phenix79
 
Регистрация: 19.12.2011
Сообщений: 40

Ещё один вопрос возник.
Допустим мы не будем знать сколько элементов формы будет создаваться, может 5, а может 10, как получится.
Как сделать так чтобы для каждого созданного INPUTа присваивался определенный ID ?
Допустим я создал через кнопку 5 элементов,
и хочу чтобы им присвоились например такие ID:
MyInput1
MyInput2
MyInput3
MyInput4
MyInput5
Как это сделать?
Ответить с цитированием
  #7 (permalink)  
Старый 28.02.2017, 16:06
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,437

Сообщение от 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>
Ответить с цитированием
  #8 (permalink)  
Старый 28.02.2017, 16:22
Аспирант
Отправить личное сообщение для phenix79 Посмотреть профиль Найти все сообщения от phenix79
 
Регистрация: 19.12.2011
Сообщений: 40

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

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

Последний раз редактировалось phenix79, 02.03.2017 в 12:20.
Ответить с цитированием
  #9 (permalink)  
Старый 02.03.2017, 15:07
Аспирант
Отправить личное сообщение для phenix79 Посмотреть профиль Найти все сообщения от phenix79
 
Регистрация: 19.12.2011
Сообщений: 40

Люди добрые, ну подскажите если кто то знает как это сделать?
Уже день ломаю голову, ничего не могу сделать.
Спасибо заранее!!
Ответить с цитированием
  #10 (permalink)  
Старый 02.03.2017, 15:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,437

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать при покупке товара менялось их количество на сайте noXeZ Элементы интерфейса 3 23.12.2014 02:40
как сделать чтобы при наведении draggable элемента раскрывалась категория rozmarin jQuery 0 29.08.2013 07:32
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19