Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2015, 15:19
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

Почему исчезает содержимое 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>
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2015, 15:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

torrius,
а вы вставляйте как элемент а не как текст
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2015, 15:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

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

torrius,
Цитата:
Но операция += с innerHTML не работает с DOM. Она не прибавляет, а заменяет всё содержимое списка на дополненную строку. Это не только медленно, но все внешние ресурсы (картинки) будут загружены заново! Так лучше не делать.
http://learn.javascript.ru/multi-ins...а-узлов
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2015, 15:52
Интересующийся
Отправить личное сообщение для torrius Посмотреть профиль Найти все сообщения от torrius
 
Регистрация: 19.11.2014
Сообщений: 15

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не работает input вне формы в IE10? AlexSpl (X)HTML/CSS 6 10.04.2014 21:41
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Как стереть содержимое поля INPUT по клавише Esc? bug FireFox? Маэстро Firefox/Mozilla 4 20.06.2011 15:55
Получить содержимое HTML файла через input Battleprof Events/DOM/Window 5 13.06.2011 14:51
Почему в Opera исчезает курсор при нажатии клавиши Esc ? Маэстро Opera, Safari и др. 3 23.11.2010 16:31