Jquery Mobile: Change The Header Of A Listview

I have looked all over for the answer to what I thought would be a somewhat simple question. All the answers I have seen are saying to use '.text()' which does not work. In Jquery

Solution 1:

You can make your life easier by surrounding the text to be changed with a SPAN element:

<h2 id="h2-test-area"><span id="h2-test-area-span">Area</span></h2>

Then you can easily use .text() on that span:

$("input[name='rad-test-area']").on("change", function() {
    $("#h2-test-area-span").text("new text");
});

DEMO

Solution 2:

Try using html replace instead of text to preserve the html contents.

$("input[name='rad-test-area']").on("change", function() {
    $("#h2-test-area a.ui-collapsible-heading-toggle").html().replace("Area", "new text");
});