jQuery appends [object HTMLInputElement]

Question

I have this AJAX function for retrieving XML with the usernames from the Java servlet. I parse the usernames here and send them to the addToUserList function, where I append with jQuery. But [Object HTMLInputElement] is the only thing which appends to the list. When I run the AJAX function on my browser console the returned XML has a first element which is [object HTMLInputElement] , but there are usernames following it.

function displayFriendList(){
    $.ajax({
        url : '/getFriendList?userid=' +userid,
        type : "POST",
        dataType: 'xml',
        success : function(data) { 
            $(data).find("friend").each(function () {
                addToUserList($(this).find("username").text());
            });
        },
    })
}

Here is the addToUserList function

var userList = new Array();

function addToUserList(friend){

    var exists = false;

    for(var i=1; i<userList.length; i++){
        if(userList[i]==friend){
            exists = true;
            break;
        }
    }

    if(!exists){

        userList.push(friend);
        $('#userList').append("<a>"+friend+"</a></br>");

and a part of the returned xml

<data>
<friend><username>[object HTMLInputElement]</username></friend>
<friend><username>asa</username></friend>
<friend><username>asda</username></friend>
<friend><username>cece</username></friend>

Answer 1

Do you need key and value in a .each?

$(data).find("friend").each(function (k,v) {
                addToUserList($(v).find("username").text());
            });

Answer 2

var userList = new Array();

您每次调用该函数时都要重新初始化用户列表，这似乎不正确