質問失礼致します。
現在、html内で記述されているtableを、javascriptにより複数に分けようとしているのですが、上手く行きません。
具体的には、

html
1<body>
2 <table style="table-layout: fixed;">
3  <thead>
4   <tr>~</tr>
5  </thead>
6
7  <tbody>
8   <tr>
9    <td>行1-1</td>
10    <td>行1-2</td>
11   </tr>
12   <tr>
13    <td>行2-1</td>
14    <td>行2-2</td>
15   </tr>
16  </tbody>
17
18 </table>
19</body>
20

というテーブルを、適当な行で以下のように分断させ、2つ以上のテーブルを作ろうとしています。

html
1 <table style="table-layout: fixed;">
2  <thead>
3   <tr>~</tr>
4  </thead>
5  <tbody>
6   <tr>
7    <td>行1-1</td>
8    <td>行1-2</td>
9   </tr>
10  </tbody>
11 </table>
12
13 <table style="table-layout: fixed;">
14  <thead>
15   <tr>~</tr>
16  </thead>
17  <tbody>
18   <tr>
19    <td>行2-1</td>
20    <td>行2-2</td>
21   </tr>
22  </tbody>
23 </table>

〇試したこと

適当なtr要素に、innerHTMLでタグを書き加えて（/tbody　/table table～thead～tr）無理矢理テーブルタグを一度閉じ、
また新しいテーブルを作成させようとしたのですが、thead以外のタグ（/tbody　/tableなど）が全て無かったことにされてしまいました。（エラーは出ないが書き込みが消えている）

なんとか1つのテーブルを複数に分裂させる方法はないでしょうか。
お知恵をお借りできたら幸いです。何卒宜しくお願い致します。

行動規範の内容に同意します

回答2件

cloneしてお互いのいらない行を削除すればよいでしょう

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  var t1=document.querySelector('table');
4  var t2=t1.cloneNode(true);
5  var idx=2;
6  
7  [].forEach.call(t1.querySelectorAll('tbody tr'),function(x,y){
8    if(y>=idx) x.parentNode.removeChild(x);
9  });
10  [].forEach.call(t2.querySelectorAll('tbody tr'),function(x,y){
11    if(y<idx) x.parentNode.removeChild(x);
12  });
13  t1.parentNode.appendChild(t2);  
14});
15</script>
16<table style="table-layout: fixed" border>
17<thead>
18<tr>
19<th>見出し-1</th>
20<th>見出し-2</th>
21</tr>
22</thead>
23<tbody>
24<tr>
25<td>行1-1</td>
26<td>行1-2</td>
27</tr>
28<tr>
29<td>行2-1</td>
30<td>行2-2</td>
31</tr>
32<tr>
33<td>行3-1</td>
34<td>行3-2</td>
35</tr>
36<tr>
37<td>行4-1</td>
38<td>行4-2</td>
39</tr>
40<tr>
41<td>行5-1</td>
42<td>行5-2</td>
43</tr>
44</tbody>
45</table>