Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Почему исчезает содержимое input? (https://javascript.ru/forum/dom-window/52906-pochemu-ischezaet-soderzhimoe-input.html)

torrius 12.01.2015 15:19

Почему исчезает содержимое input?
 
Суть проблемы:
если в поле input ввести текст, а затем динамически добавить новое поле, кликнув по "add", этот текст исчезает. Почему?
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
		function addInput(){
			document.getElementById('add_block').innerHTML += '<br/><input type="text" />';
		}
	</script>
</head>
<body>
	<div id="add_block">
		<input type="text" />
	</div>
	<span onclick="addInput()" style="cursor: pointer;">add</span>
</body>
</html>

рони 12.01.2015 15:26

torrius,
а вы вставляйте как элемент а не как текст

рони 12.01.2015 15:32

torrius,
или так
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
		function addInput(){
			document.getElementById("add_block").insertAdjacentHTML("beforeEnd", "<br/><input type='text' />");
		}
	</script>
</head>
<body>
	<div id="add_block">
		<input type="text" />
	</div>
	<span onclick="addInput()" style="cursor: pointer;">add</span>
</body>
</html>

рони 12.01.2015 15:35

torrius,
Цитата:

Но операция += с innerHTML не работает с DOM. Она не прибавляет, а заменяет всё содержимое списка на дополненную строку. Это не только медленно, но все внешние ресурсы (картинки) будут загружены заново! Так лучше не делать.
http://learn.javascript.ru/multi-ins...а-узлов

torrius 12.01.2015 15:52

рони,
крутяк! спасибо за ценную инфу! Не знал что innerHTML все заменяет.


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