Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>Demonstrating &lt;template&gt;</title>
    <style>
      /* Not necessary, just a little bit of CSS to prevent our table from looking abhorrent */
      table {
        background: #000;
      }
      table td
      {
        background: #fff;
      }
    </style>
  </head>
  <body>
    <h1>Products</h1>
    <table id="producttable">
      <thead>
        <tr>
          <td>UPC_Code</td>
          <td>Product_Name</td>
        </tr>
      </thead>
      <tbody>
        <!-- any existing data can be put here -->
      </tbody>
    </table>
​
    <template id="productrow">
      <tr>
        <td class="record"></td>
        <td></td>
      </tr>
    </template>
    
    <script>
    // Test to see if the browser supports the HTML template element by checking
    // for the presence of the template element's content attribute.
    if ('content' in document.createElement('template')) {
​
      // Instantiate the table with the existing HTML tbody and the row with the template
      var t = document.querySelector('#productrow'),
      td = t.content.querySelectorAll("td");
      td[0].textContent = "1235646565";
      td[1].textContent = "Stuff";
​
      // Clone the new row and insert it into the table
      var tb = document.getElementsByTagName("tbody");
      var clone = document.importNode(t.content, true);
      tb[0].appendChild(clone);
​
      // Create a new row
      td[0].textContent = "0384928528";
      td[1].textContent = "Acme Kidney Beans";
​
      // Clone the new row and insert it into the table
      var clone2 = document.importNode(t.content, true);
      tb[0].appendChild(clone2);
​
    } else {
      // Find another way to add the rows to the table because 
      // the HTML template element is not supported.
    }
    </script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
awesom3pro
0viewers