Storing array content in a div class and showing clear names

Question

I have a few users who are inside an active directory. In the active directory they have usernames like i:0#.w|opmain\name. It synchronises daily.

With the UPS (User Profile Service) I normally get the username (f.ex. borisj). In order to get the real name (f. ex. Boris Johnson) I have to make a lookup in the UPS.

I want to make a lookup in the UPS to get the clear name. Regarding this I have a function getUserInformation(username,type) and onChangeRequestor():

function getUserInformation(username, type) {    
    var clientContext = new SP.ClientContext.get_current();
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
    personProperties = peopleManager.getPropertiesFor(username);
    clientContext.load(personProperties);        
    clientContext.executeQueryAsync(function () { processUserInformationSuccess(personProperties, type) }, function () { processUserInformationFail(type) });

}

function onChangeRequestor() {    
    var logins = replaceSubstring(NWF$("#" + varRequestorID).val(), ";", "");
    var accountArray = logins.split("|")
    var username = accountArray[1];    
    getUserInformation(username, "requestorinfo");     
}

So I create an array and iterate through it:

var userarray = new Array();
var username; 
var logins;
var accountArray;
for (var i = 0; i < userarray.length; i++) {
    logins = replaceSubstring(NWF$("#" + varRequestorID).val(), ";", "");
    accountArray = logins.split("|")
    username = accountArray[1];
    getUserInformation("opmain\\" + userarray[i], lookupUserDefaultName); 
}
userarray.push(username);

I want to store the content (clear names) in a div class, but I don't know how.

I thought of something like this, but it makes little sense to me:

var <div class="users">Usernames</div>
var username = document.getElementsByClassName("users");
for (var i = 0; i < usernames.length; i++){
    usernames[i].className += " new_class";
}
lookupUserDispName();

And here's lookupUserDispName:

function lookupUserDispName(){
     for (var i = 0; i < userarray.length; i++) {
        getUserInformation(userarray[i], lookupUser); 
        OnChangeRequestor();
        requestor = displayName; 
    }
}

Answer 1

Well, as far as I understood, what you want is get a user's name, and use this name as a class name for a div.

Let's say you have a div like this:

<div id="userDiv"></div>

You can add a class name to this div by doing:

var div = document.getElementbyId("userDiv");
div.className = username; //or div.classList.add(username); if you don't want to override existing classes