Montar lista customizada no Html com retorno do FIrebase

Front-end JavaScript
, ,
#1

Olá, bom dia!

Contexto:
Bem, montando um CRUD web com firebase e javascript puro. Ao “buscar” os dados do “database”, tenho uma função que monta os dados no html em forma de lista.

Atualmente encontra-se assim a lista:

firebase.database().ref('usuarios').on('value', function(snapshot){
        usersList.innerHTML = '';
        snapshot.forEach(function(item) {
            var li = document.createElement('li');
            li.appendChild(document.createTextNode(item.val().name + ' : ' + item.val().age));
            usersList.appendChild(li);
        });
    });

Saída Atual:

Problema:
Como montar essa lista de forma customizada? Tipo, colocando mais de uma linha dentro de cada elemento lista?

Saída esperada:

Cód tentativa:

firebase.database().ref('usuarios').on('value', function(snapshot){
        listaDataBase.innerHTML = '';
        snapshot.forEach(listaCustomizada);
    });

    var listaCustomizada = function (item) {

        var li = document.createElement('li');
        var usu = item.val();
        var html = '';
        html += '<div>';
        html += '<b>'Usuário :'</b>' + usu .name + '<br/>';
        html += '<b>'Idade :'</b>' + usu .age;
        html += '</div>';
        li.appendChild(document.createTextNode(html);
        usersList.appendChild(li);
    }

Alguma sugestão?
Desde já obrigado pela ajuda.

#2

É exatamente assim que se faz isso :wink: Existem outras formas, como ferramentas de template, alguns frameworks conseguem abstrair isso, como vue.

O máximo que eu mudaria ali, seria o caso de não colocar div, dentro de li a menos que seja estritamente necessário