Time for action – implementing a template

To start out we need a place to put the template's markup. So we'll add a <div id="templates"> to our HTML file outside of the app element and give it a class of hidden. As you may recall from our CSS, the hidden class sets display to none for an element. This will hide the template's markup so it is never seen by the user. Now let's define the template:

<div id="app">
  …
</div>
<div id="templates" class="hidden">
  <ul id="task-template">
    <li class="task">
      <div class="tools">
        <button class="delete" title="Delete">X</button>
        <button class="move-up" title="Up">^</button>
        <button class="move-down" title="Down">v</button>
      </div>
      <span class="task-name"></span>
    </li>
  </ul>
</div>

I don't know about you, ...

Get HTML5 Web Application Development By Example Beginner's guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.