Criação de Elementos no Javascript. ME AJUDEM !!!

Qual a melhor forma de criar elementos no Javascript ?

Um código assim:

let btnCriaClassi = document.getElementById('criaClassi')
let divHoldClassifi = document.getElementById('divHoldClassifi')
let divHoldVari = document.getElementById('divHoldVari')
let criaVari = document.getElementById('criaVari')

function criarDiv(){
    let cardsClassificacoes = document.createElement('div')
    cardsClassificacoes.classList.add('cardsClassificacoes')
    return cardsClassificacoes;
}
function criarInput(){
    let inputsClassi = document.createElement('input');
    inputsClassi.classList.add('inputs');
    inputsClassi.type = 'text';

    let inputsClassi = document.createElement('input')
    inputsClassi.classList.add('inputs')
    inputsClassi.type = 'text'
    inputsClassi.name = ''

    return inputsClassi;
}
function criarBotaoCancelar(){
    let btnsCancel = document.createElement('button');
    btnsCancel.classList.add('btnsCancel');
    btnsCancel.innerText = 'Cancelar';   

    return btnsCancel;
}
function criarBotaoConfirmar(){
    let btnsConfirm = document.createElement('button');
    btnsConfirm.classList.add('btnsConfirm');
    btnsConfirm.innerText = 'Cancelar';
    return btnsConfirm;
}
function criaClassificacao() {
    let cardsClassificacoes = criarDiv(),
        inputsClassi = criarInput(),
        btnsCancel = criarBotaoCancelar(), 
        btnsConfirm = criarBotaoConfirmar();
    cardsClassificacoes.append(inputsClassi, btnsCancel, btnsConfirm);
    return cardsClassificacoes;        
}

btnCriaClassi.addEventListener('click', () => {
    criaClassificacao()
})

Ou um código assim:

let btnCriaClassi = document.getElementById('criaClassi')
let divHoldClassifi = document.getElementById('divHoldClassifi')
let divHoldVari = document.getElementById('divHoldVari')

function criaClassificacao() {
    let cardsClassificacoes = document.createElement('div')
    cardsClassificacoes.classList.add('cardsClassificacoes')

    let inputsClassi = document.createElement('input')
    inputsClassi.classList.add('inputs')
    inputsClassi.type = 'text'
    //inputsClassi.name = ''

    let btnsCancel = document.createElement('button')
    btnsCancel.classList.add('btnsCancel')
    btnsCancel.innerText = 'Cancelar'

    let btnsConfirm = document.createElement('button')
    btnsConfirm.classList.add('btnsConfirm')
    btnsConfirm.innerText = 'Cancelar'
    cardsClassificacoes.append(inputsClassi, btnsCancel, btnsConfirm)
    divHoldClassifi.appendChild(cardsClassificacoes)
}

btnCriaClassi.addEventListener('click', () => {
    criaClassificacao()
})

Quem puder me ajudar, agradeço.