Ajout de liste dynamique - aide

Bonjour,

Je suis débutant en javascript... enfin, il y a bien dix ans que je n'y ai pas touché.
Je vous prierais de ne pas me juger trop sévèrement

En premier lieu, j'ai vu un article qui traitait de mon sujet. Néanmoins, j'ai du mal à le mettre en oeuvre.
Alors ce que j'attends, ce n'est pas un lien vers le sujet, mais une aide peut être plus spécifique.

Je travaille actuellement sur nodejs et webrtc. Mon objectif est le suivant :
A la suite de l'identification, une liste des utilisateurs connectés apparait.
A côté de chaque utilisateur, il y a un icone servant à activer un service (voix / video / chat, etc)

Je vais vous copier le code, mais avant, j'aimerais vous l'expliquer de manière à le rendre plus lisible.
Je créer une list (ul) dans laquelle le premier enfant (li) est le username, puis dans les autres, les fonctionnalités.
Mon code fonctionne, mais il est très moche....
1) je ne sais pas s'il vaut mieux que je mette le nom d'utilisateur dans une div (ou span), puis les fonctionnalités dans une liste et le tout dans une div.
Ceci dans le but de pouvoir styliser plus facilement les boutons de fonctionnalités.

2) il faudrait vraiment que je fasse un code plus propre et plus dynamique. Pour l'instant, j'ajoute tous les boutons un par un, et j'aimerais plutôt faire une fonction comme celui décrit ici

voici le code en question (s'il vous manque des parties pour mieux comprendre, n'hésitez pas à me le faire savoir :

function MakeUserList (data) {
    clearConnectList();
    ClientDiv = document.getElementById('otherClients');
    connectionStatus = document.getElementById("iam").innerHTML;
    for(var i in data) {
        var usersConnectedList = document.createElement('ul');
        usersConnectedList.className = "userConnectedList";
        var userNameConnected=document.createElement('li');
        userNameConnected.className= "userNameConnected";
        var phone=document.createElement('li');
        phone.className= "icon-phone";
        phone.onclick = function(webRTCid) {
            return function() {
                performCall(webRTCid);
            };
        }(i);
        var facetoface = document.createElement('li');
        facetoface.className = "icon-facetime-video";
        var chatbubble = document.createElement('li');
        chatbubble.className = "icon-comment-alt";
        var label = document.createTextNode(webRTC.idEnNom(i));
        userNameConnected.appendChild(label);
        usersConnectedList.appendChild(userNameConnected);
        usersConnectedList.appendChild(phone);
        usersConnectedList.appendChild(facetoface);
        usersConnectedList.appendChild(chatbubble);
        ClientDiv.appendChild(usersConnectedList);
    }

    if( !ClientDiv.hasChildNodes() && (connectionStatus != "Déconnecté")) {
        ClientDiv.innerHTML = "<em>Aucun correspondant en ligne...</em>";
    }
    else if( !ClientDiv.hasChildNodes() && (connectionStatus == "Déconnecté")) {
        ClientDiv.innerHTML = "<em>Veuillez vous reconnecter pour accéder à la liste des utilisateurs.</em>";
    }
}