Динамическое создание разметки HTML на Javascript

let a = 30;
let div = document.createElement('div');
document.body.appendChild(div);
const f = intend => {   
    let newDiv = document.createElement('div');
    div.appendChild(newDiv);
    newDiv.style.position = 'absolute';
    newDiv.style.marginLeft = intend.toString() + 'px'; 
    for (var i = 0; i < 4; i++) {           
        let sp = document.createElement('span');            
        sp.innerHTML = '0';         
        newDiv.appendChild(sp);
    }
}
for (var k = 0; k < 4; k++) {
    f(a);
    a += 50;
}

sp.textContent = 0;

alert(5 + 'px')

const newDiv = document.createElement('div');
newDiv.innerHTML = Array(5).fill('<span>0</span>').join('')
div.appendChild(newDiv);

let a = 30;
 
let newDiv = document.createElement('div');
newDiv.style.position = 'absolute';
 
let sp = document.createElement('span');
sp.textContend = '0';  
let sp4 = Array(4).map (_ => sp.cloneNode(true));
newDiv.append(...sp4);
 
let newDiv4 = Array(4).map ((_, i)=> {
        const nd = newDiv.cloneNode(true);
        nd.style.marginLeft = (30 + 50 * i) + 'px';
        return nd;
    });
    
let div = document.createElement('div');
div.append (...newDiv4);
 
document.body.append(div);