jQueryで要素の中身を二つに区切りたい

Question

実現したいこと

jQueryを使用して、表示した<section></section＞を二つの<section></section>に分割したい

前提

DBから取得してきたデータを元に、グラフや表などを表示させるようなプログラムを作ったのですが、
印刷するときに中途半端なところで途切れてしまうのが嫌なので、途中で改ページを入れたいと思っています。

DBに格納されているデータを使って、一旦そのままのデータでHTMLを出力し、

<section></section>で区切って改ページのためのCSSを当てているのですが、 一部のデータでページをはみ出してしまうケースが発生したため、jQueryで<section></section>内部の要素の高さを読み込み、 一定値以上になったら</section><section>を挿入して強制的に改ページを入れようとしました。

しかし、実際に動作させてみると</section><section>ではなく<section></section>が入ってしまうだけで、うまく改ページができません。
指定したHTMLをそのまま挿入させ、一つの<section></section>を二つに区切るには、どうすれば良いのでしょうか。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<section class="print_page">
	<p class="print_header">ヘッダー</p>
	<h1 class="content_block">見出し</h1>
	<h2 class="content_block">小見出し</h2>
	<div class="content_block"><canvas>chart.jsで出力したグラフ</canvas></div>
	<table class="content_block">コメントの一覧１</table>
	<table class="content_block">コメントの一覧２</table>
	<table class="content_block">コメントの一覧３</table>
	<table class="content_block">コメントの一覧４</table>
	<table class="content_block">コメントの一覧５</table>
	<p class="print_footer">フッター</p>
</section>

$(function() {
	$('.print_page').each(function() {
		var contents_height = 0;
		$(this).children().each(function() {
			var this_height = $(this).outerHeight();
			if (this_height + contents_height >= 900) {
				$(this).after('<p class="print_footer">フッター</p></section><section class="print_page"><p class="print_header">ヘッダー</p>');
				contents_height = 0;
			} else {
				contents_height += this_height;
			}
		});
	});
});

<section class="print_page">
	<p class="print_header">ヘッダー</p>
	<h1 class="content_block">見出し</h1>
	<h2 class="content_block">小見出し</h2>
	<div class="content_block"><canvas>chart.jsで出力したグラフ</canvas></div>
	<table class="content_block">コメントの一覧１</table>
	<table class="content_block">コメントの一覧２</table>
	<table class="content_block">コメントの一覧３</table>
	<p class="print_footer">フッター</p>
</section>
<section class="print_page">
	<p class="print_header">ヘッダー</p>
	<table class="content_block">コメントの一覧４</table>
	<table class="content_block">コメントの一覧５</table>
	<p class="print_footer">フッター</p>
</section>

<section class="print_page">
	<p class="print_header">ヘッダー</p>
	<h1 class="content_block">見出し</h1>
	<h2 class="content_block">小見出し</h2>
	<div class="content_block"><canvas>chart.jsで出力したグラフ</canvas></div>
	<table class="content_block">コメントの一覧１</table>
	<table class="content_block">コメントの一覧２</table>
	<table class="content_block">コメントの一覧３</table>
	<p class="print_footer">フッター</p>
        <section>
                <p class="print_header">ヘッダー</p>
        </section>
	<table class="content_block">コメントの一覧４</table>
	<table class="content_block">コメントの一覧５</table>
	<p class="print_footer">フッター</p>
</section>

試したこと

・HTMLを挿入する箇所をafter → appendにしてみる
→挿入される箇所が変わっただけで、期待した状態にはならない

補足情報（FW/ツールのバージョンなど）

・jQuery3.4.1

Comments

[yambejp]

両方のsectionにヘッダが存在して見出しが存在しないのはどう判断すればよいのでしょうか？
なにをどう言う根拠で振り分けるかきちんと仕様を決めたほうがよいかと

Answer 1

条件があいまいなので、とりあえず3個と2個にわけときます

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const s1=document.querySelector('.print_page');
  const s2=s1.cloneNode();
  document.querySelectorAll('table').forEach((x,y)=>x.setAttribute('data-index',y+1));
  s1.querySelectorAll('.print_page > *').forEach(x=>{
    if(x.matches('.print_header,.print_footer')){
      s2.appendChild(x.cloneNode(true));
    }
    if(x.dataset.index>=4){
      s2.appendChild(x);
    }
  });
  s1.after(s2);
});
</script>

<section class="print_page">
<p class="print_header">ヘッダー</p>
<h1 class="content_block">見出し</h1>
<h2 class="content_block">小見出し</h2>
<div class="content_block"><canvas>chart.jsで出力したグラフ</canvas></div>
<table class="content_block"><tr><td>コメントの一覧１</td></tr></table>
<table class="content_block"><tr><td>コメントの一覧２</td></tr></table>
<table class="content_block"><tr><td>コメントの一覧３</td></tr></table>
<table class="content_block"><tr><td>コメントの一覧４</td></tr></table>
<table class="content_block"><tr><td>コメントの一覧５</td></tr></table>
<p class="print_footer">フッター</p>
</section>

Answer 2

タグは開きタグから閉じタグまでで1セットで、jQueryの操作で「閉じタグ＋開きタグ」のようなものを追加することはできません。

改ページが目的でしたら、<section>自体を区切るのではなく、<section>の内側に区切り用の要素を追加する、という方がやりやすいと考えます。

Comments

[yukie1101]

回答ありがとうございます！

> タグは開きタグから閉じタグまでで1セットで、jQueryの操作で「閉じタグ＋開きタグ」のようなものを追加することはできません。

この話が衝撃でした…outerHTMLとか色々試したんですが、うまくできなかったのはそういう理由だったのですね。

「閉じタグ＋開きタグ」を挿入したかった一番の理由は、ヘッダーとフッターを各ページに挿入したい、両者ともCSSでposition:absolute;を設定している、という理由が大きかったのですが、おっしゃるような区切り用要素を追加した場合、このあたりがうまく動かない気がしています。
何か良い回避方法、もしご存じでしたら教えていただきたいです。