Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2015, 14:02
Новичок на форуме
Отправить личное сообщение для rgba Посмотреть профиль Найти все сообщения от rgba
 
Регистрация: 19.04.2015
Сообщений: 7

createElement vs innerHTML
Здравствуйте.
Есть простенькая задачка - создать на странице несколько textarea с подписями. Пытаюсь не быдлокодить, но знаний пока не много.
У меня получилось 2 варианта, через innerHTML:
function extraFields(arr){
	var content = '';

	for(var i = 0; i < arr.length; i++){
		content += '<div>' + arr[i] + '</div><textarea></textarea>';
	};

	document.body.appendChild(content);
};
extraFields(['Описание 1','Описание 2','Описание 3','Описание 4']);


И c помощью createElement:

function extraFields(arr){
	var fieldsWrapper = document.createElement('div');
	
	for(var i = 0; i < arr.length; i++){
		var title = document.createElement('div');
		var titleText = document.createTextNode(arr[i]);
		var textarea = document.createElement('textarea');
		
		title.appendChild(titleText);
		fieldsWrapper.appendChild(title);
		fieldsWrapper.appendChild(textarea);
	};
	
	document.body.appendChild(fieldsWrapper);
}
extraFields(['Описание 1','Описание 2','Описание 3','Описание 4']);

Как видите, второй вариант у меня получился намного длиннее, но судя по тому, что я вычитал, должен работать быстрее первого. Так ли это, и есть более оптимальный код для решение этой задачи?

Последний раз редактировалось rgba, 23.04.2015 в 14:13.
Ответить с цитированием
  #2 (permalink)  
Старый 23.04.2015, 15:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от rgba
через innerHTML
где?
Ответить с цитированием
  #3 (permalink)  
Старый 23.04.2015, 16:25
Новичок на форуме
Отправить личное сообщение для rgba Посмотреть профиль Найти все сообщения от rgba
 
Регистрация: 19.04.2015
Сообщений: 7

Сообщение от рони Посмотреть сообщение
где?
Опечатка.

document.body.appendChild(content);
document.body.innerHTML = content;


Суть вопроса и так была понятна.
Ответить с цитированием
  #4 (permalink)  
Старый 23.04.2015, 16:45
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Цитата:
должен работать быстрее первого
innerHTML медленнее appendChild потому, что вызывает полную перерисовку элемента-родителя. Если в бади нет кучи прочих элементов и задача на описанном и ограничивается - юзай простейшее, конечно. Хотя второй вариант чище, да: проще расширяется.

Последний раз редактировалось Erolast, 23.04.2015 в 16:48.
Ответить с цитированием
  #5 (permalink)  
Старый 23.04.2015, 16:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

rgba,
https://learn.javascript.ru/multi-insert
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
createElement VS innerHTML zhurchik Общие вопросы Javascript 20 30.07.2014 13:38
innerHTML не отображает swf плеер web-master Общие вопросы Javascript 3 23.02.2014 18:34
innerHTML....? Hapson Элементы интерфейса 4 24.07.2013 01:33
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 20:26
ошибка с innerHTML Gekt0r Общие вопросы Javascript 15 21.08.2008 11:57