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']);

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

где?

Опечатка.

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

Суть вопроса и так была понятна.

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

rgba,
https://learn.javascript.ru/multi-insert