ブラウザのよくわからない挙動

どんな挙動？

tr,th,tdが消滅してしまう

状況

テンプレートとして用意したタグの中から

tr,th,tdタグがすっぽり消滅してしまう

例

ソース

<table>
 <tbody>
 </tbody>
</table>

<div id="template">
 <tr>
  <th>日付</th>
  <td><a href="http://map.html">場所</a></td>
  <td>
   <p>注意事項</p>
  </td>
 </tr>
</div>

ブラウザ上

<div id="template">
  <a href="htpp://map.html">場所</a>
  <p>注意事項</p>
</div>

なぜかtr,th,tdが無くなっている

解決策

1. id templateのタグをdivではなくtableにする

<table id="template">
 <tr>
  <th>日付</th>
  <td><a href="http://map.html">場所</a></td>
  <td>
   <p>注意事項</p>
  </td>
 </tr>
</table>

これで意図通りに動いてくれました。

あとがき

頻繁にとは言わないけれど、それなりに使う状況ありそうなものだけれど、この挙動についての記事を探してみたけれど見当たらず
みんな躓かないのかな～？
こんなことで３時間も潰してしまったので３年ぶりに吐き出してみました。
３年前とあまり書いているレベルが変わっていないような＾＾；
それでもまあ開発は順調に進んでいます。

初めはjQuery.clone()不具合のような記事を書きましたが
@nishimura さんにご指摘いただきブラウザの挙動によるものとわかり全体的に修正を入れてあります。

@nishimura さん
ありがとうございました！