Count to display in a page

Question

I received this fix via StackExhange Sharepoint but I can't seem to locate it again for my post (sorry)...but it did work using CAML Query to count items in a list.

I want to change one thing...I want to display this on a page instead of a pop up. So when I change the "alert" to a "document.write". The problem is that it gives me the correct number however, it redirects to it's on page. Here is the code:

<script type="text/javascript">
    //alert("test");
    var clientContext = null;
    var web = null;
    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");
    function Initialize()
    {
        clientContext = new SP.ClientContext.get_current();
        web = clientContext.get_web();
        var list = web.get_lists().getByTitle("Testing");
        var camlQuery = new SP.CamlQuery();
        var q = "<View><Query><Where><Eq><FieldRef Name='State' /><Value Type='Text'>Open</Value></Eq></Where></Query><RowLimit>0</RowLimit></View>";
        camlQuery.set_viewXml(q);
        this.listItems = list.getItems(camlQuery);
        clientContext.load(listItems, 'Include(ID)');
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), 
        Function.createDelegate(this, this.onQueryFailed));
    }
    function onListItemsLoadSuccess(sender, args) {

        var count = this.listItems.get_count();

        document.write("Open:  " + count);
    }

    function onQueryFailed(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }

</script>

I changed the

alert(count);

to

document.write("Open:  " + count);

Is there a way to place it on the current page instead of redirecting to it's own page?

Is there another code I need to add?

Answer 1

You can append the count to any existing html element on page.

Using JavaScript:

var paragraph = document.createElement("P");
paragraph.innerHTML = "Count:  " + count;
document.getElementById("elementIdWhereToAppend").appendChild(paragraph);

Using jQuery:

var paragraph = "<p>Count:  " + count + "</p>";
$("#elementIdWhereToAppend").append(paragraph);