Change primefaces split button values with javascript

I have created the following split button with primefaces :

<h:form style="text-align: right;" >
    <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
    <p:splitButton value="My Profile" actionListener="#{userLogin.myprofile}">
        <p:menuitem value="Log In"  url="http://localhost:8080/xhtml_files/login.xhtml"/>
        <p:menuitem value="Sign Up" url="http://localhost:8080/xhtml_files/signup.xhtml"/>
    </p:splitButton>
</h:form>

In my web development project I successfully validate users and check if they are logged in or not. I want to change menuitems values when a user is logged in , and change it to something like that:

<h:form style="text-align: right;" >
    <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
    <p:splitButton value="My Profile" actionListener="#{userLogin.myprofile}">
        <p:menuitem value="Log Out" actionListener="#{userLogin.logout}" />
    </p:splitButton>
</h:form>

Is there any possible way to achieve this ?