【jQuery】要素の追加方法（要素内のはじめ、後ろ、要素外のはじめ、後ろや要素を包む方法も）

いつもjQueryで要素を追加する時に検索してトップに出てくるキータを見ています。
いつもいつもありがとうございます！
そのキータのページではGIFかmp4で要素を追加した様子を流していてわかりやすいのですが
実際にボタンを押して動かす方がさらに分かりやすい！と思って作ってみました。
よく見たらgithubにそのまま上がっていましたが、せっかく書いたし見てくれたら嬉しいです！

要素内の始め（最初）に追加｜prepend()

$('ul').prepend('<li>one</li>');

要素内の後ろ（最後）に追加｜append()

$('ul').append('<li>three</li>');

要素外の始め（最初）に追加｜before()

$('ul').before('<p>other</p>');

要素外の後ろ（最後）に追加｜after()

$('ul').after('<p>other</p>');

要素すべてを包む｜wrapAll()

$('p').wrapAll('<div class="wrap"></div>');

個々に要素を包む｜wrap()

$('p').wrap('<div class="wrap"></div>');

要素の中を包む｜wrapInner()

$('p').wrapInner('<span></span>');