[rgba]

Здравствуйте.
Есть простенькая задачка - создать на странице несколько 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']);

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