I have been reading the documentation on the `<template>` tag, and I can't seem to understand how it is different from simply using a `<div>` that is `display: none;`

Documentation: [template tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)

`<template>` example

```
<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

```

VS
`<div>` example

```
<div id="productrow" style="display: none">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</div>

```

1. On a low level, how does the browser handle these 2 examples differently?
2. Are certain JS methods or HTML attributes different or not available?

PS: I am aware of browser compatibility differences