Making a ul work on server side code as well as client side code.

The user selects a value from the drop down and then, adds li elements to the ulSelectedusrs by calling a javascript. I also need to be able to add some users on page_load on the server side code. So when I add the runat="server" tag, the li elements are not added when the image is clicked. How can I make it work such that on page load I can add elements server side as well as when the image button is clicked I can add it client side. please help . Thanks
<asp:ImageButton runat="server" ID="imbBtnAdd" ImageUrl="~/images/plus_add_green.png" ImageAlign="AbsMiddle" OnClientClick="return addUser();" />
                            <ul id="ulSelectedUsers" class="selectedUsers" runat="server">

I have added my javascript code :
var selectedUsers = [];

    function adduserToList(userId, userName) {
        selectedUsers.push(userId);
       
        var li = $("<li></li>").text(userName).addClass("username");
        $(li).attr("id", userId);

        var deleteCtl = $("<a>").text("x");
        $(deleteCtl).attr({
            href: "#",
            class: "removelink"
        });

        $(deleteCtl).attr("onclick", "return removeuser(" + userId + ")");
        $(li).append(deleteCtl);

        $("#ulSelectedUsers").append(li);
    }
   
   function addUser() {
        userId = parseInt($('#<%= ddlistUser.ClientID %>').val());
        debug("userId = " + userId);
        if (userId == -1) {
            alert('Please select a audtior.');
            return false;
        }

        if (selectedUsers.exists(userId)) {
            alert('Auditor is already selected.');
            return false;
        }

        userName = $("#<%= ddlistUser.ClientID%> :selected").text();
        adduserToList(userId, userName);

        return false;
    }