jQueryでイベントハンドラも含めてDOMを複製する

jQueryをバンバン使用している案件において、
clickイベント登録されたボタンを別の場所にも配置したい
でもCMS改修はしたくないから、フロントで何とかしてほしい
という要件でちょっとググったら出てきました。

今の今まで存在を知らなかっただけですが、自分用のメモとして…

clone(true)を使う

clone()はある要素のコピーを作成してDOMの他の場所に配置する関数です。
jQuery("#A").clone().insertBefore("#B")のように使います。

clone(true)とtrueをセットすることでイベントハンドラも含めてDOMをコピーできます。

例

jQuery("#clone-sitai-el").clone(true).insertBefore("#kono-el-no-ueni-insert");

おまけ：jQueryを使用しない場合

結論から言うとイベント含めたDOM複製はバニラJSでは不可です。
cloneNode(true)でclone()と同等の複製はできますが、on()やaddEventListener()で登録したイベントは引き継がれないです。
（HTMLのonclick属性は引き継げます）
ちなみにcloneNode(false)にすると対象ノードだけ複製してきて子要素は無視します。

とりあえず、この分野に関してはまだjQueryに軍配が上がるようで・・・
長いページにおいて、ライブラリを使って簡単に実装したモーダル表示ボタンとかをいろんば場所に置いておきたい、等の場面で便利だなぁ