Passing a block of html to jQuery function

Passing a block of html to jQuery function

I am new to jQuery and trying to figure out the sample code below:


  1. var taskTemplate = '<li class="task"><input class="complete" type="checkbox" /> <input class="description" type="text" placeholder="Enter task description..." /> <button class="delete-button">Delete</button></li>';

  3. function _renderTask(task) {
  4.     var $task = $(taskTemplate);
  5.     if(task.complete) {
  6.         $task.find(".complete").attr("checked", "checked");
  7.     }
  8.     $task.find(".description").val(task.description);
  9.     return $task;
  10. }
My question is that on line 4 the whole block of html for tasktemplate variable is passed to jQuery function for selection. I am used to seeing only class or id passed to $ function. What is this trying to accomplish?

Also, i wanted to know when task.complete would return true?