Создание нескольких элементов

Question

JavaScript

var textBlock = document.createElement('div'); 
textBlock.setAttribute('class', 'finalBlock'); 

var addFinalBlock = document.getElementsByClassName('block')[0]; 
addFinalBlock.appendChild(textBlock); 

textBlock.innerHTML = "Make this block a text block"; 

// ------- 
var textBlock2 = document.createElement('div'); 
textBlock2.setAttribute('class', 'finalBlock'); 

var addFinalBlock2 = document.getElementsByClassName('block')[0]; 
addFinalBlock2.appendChild(textBlock2); 

textBlock2.innerHTML = "Make this block a text block2"; 

// ------- 
var textBlock3 = document.createElement('div'); 
textBlock3.setAttribute('class', 'finalBlock'); 

var addFinalBlock3 = document.getElementsByClassName('block')[0]; 
addFinalBlock3.appendChild(textBlock3); 

textBlock3.innerHTML = "Make this block a text block3"; 

// ------- 
var textBlock4 = document.createElement('div'); 
textBlock4.setAttribute('class', 'finalBlock'); 

var addFinalBlock4 = document.getElementsByClassName('block')[0]; 
addFinalBlock4.appendChild(textBlock4); 

textBlock4.innerHTML = "Make this block a text block4"; 

Я хочу создать 4 элемента с разным текстом. Класс должен оставаться прежним. Я думаю, что я делаю это с большим количеством кода.

Возможно, у кого-то есть информация, как сделать этот код более красивым и более эффективным?

С наилучшими пожеланиями и спасибо!

Answer 1

Если вы делаете же вещи много раз, используйте петлю. магазин различный текст в массиве и пройти через него с Foreach:

var text = ["text1", "tex2", "text3", "text4"]; 
text.forEach(function(el) { 
    var div = document.createElement("div"); 
    div.className = "finalBlock"; 
    div.innerHTML = el; 
    document.body.appendChild(div); 
}); 

или с для цикла:

var text = ["text1", "tex2", "text3", "text4"]; 
for(var i = 0; i < text.length; i += 1) { 
    var div = document.createElement("div"); 
    div.className = "finalBlock"; 
    div.innerHTML = text[i]; 
    document.body.appendChild(div); 
} 

Demo

Answer 2

Я считаю, лучшим подходом будет только обновление DOM с использованием fragment.

var docFrag = document.createDocumentFragment(); 

for(var i = 0; i < divs.length; i++) { 
    docFrag.appendChild(divs[i]); // Note that this does NOT go to the DOM 
} 
document.body.appendChild(docFrag); // Appends all divs at once