Elegant way to change div tag using jQuery

Question

This is my list of users.

I need to change the red circle mark.

$("#infoListBox .label").text($("#infoListBox a").length);
$("#infoListBox .list").bind("DOMSubtreeModified",function(){
    $("#infoListBox .label").text($("#infoListBox a").length);
});

When the document is loading, enter the number (red) and change the label; then uncheck (change label from 21 to 20).

I want to improve this code.

My solution is better.

function getUserLength(){
    return $("#infoListBox .label").text($("#infoListBox a").length);
}
// user count
getUserLength();
$("#infoListBox .list").bind("DOMSubtreeModified",function(){
    $("#infoListBox .label").val(getUserLength());
});

I am using jade template engine, my jade code is below.

div(id='infoListBox').ui.fluid.vertical.menu
  div.header.item Users
    a.ui.red.circular.label
  div.list.item
    a.item Me
    a.item 조제우
    a.item 장형주
    a .item 남중민
    a.item Me
    a.item 조제우
    a.item 장형주
    a.item 남중민
    a.item Me
    a.item 조제우

Answer 1

I think it $("#infoListBox .label")represents labelor span. Therefore use .text()

$("#infoListBox .label").text(getUserLength());

Updates: no need above, just

$("#infoListBox .list").bind("DOMSubtreeModified",function(){
    getUserLength();
});

Since it already shows the length in a red circle mark, just call this method in the event . getUserLength() DOMSubtreeModified

Answer 2

try it

function getUserLength(){
return $("#infoListBox a").length;
}

getUserLength();
$("#infoListBox .list").bind("DOMSubtreeModified",function(){
$("#infoListBox .label").html(getUserLength());
});