how to convert output from alert box to display on page - javascript/html

Question

I'm trying to write a script that counts specific words from <td> 's on my page and displays the total within an HTML element. In this example I am counting how many times the word "Complete" appears within tables. So the half-way-there script I have now is as follows:

<p>
   <script>
      $(document).ready(function(){
         var x = $("td");
         alert($('td:contains("Complete")').length);
      });
   </script>
</p>

This works pretty well, when the page loads an alert box pops up and correctly counts the occurrences of the word "Complete." My hang up is how do I modify this to display on the page instead of with the alert box? I've tried using innerHTML shown here and analyzed a number of similar questions here on stack overflow trying to mimic the examples, but I always break the counting function when trying to adapt it over.

This is my first time writing js and here is my latest attempt which makes me feel like that dog who has no idea what he's doing:

<p class="completed">
   <script>
      $(document.getElementById("completed")).innerHTML(function(){
         var x = $("td");
         $('td:contains("Complete")').length;
      });
   </script>
</p>

Insights into how I can fix the second code block is very much appreciated. Thanks!

Answer 1

Simply print the output where you want instead of to an alert box. Consider the following:

<p>
   <script>
      $(document).ready(function(){
         var x = $("td");
         // Print out the result to the #resultsGoHere element
         $('#resultsGoHere').html($('td:contains("Complete")').length);
      });
   </script>
</p>
<p id="resultsGoHere"></p>