jQueryの「$(‘#id’).wrap(‘<div>’)」をピュアJavaScriptで書きたい

こんにちは、さちです。

最近、JavaScript を書くときに「jQuery」を使うことが減ってきました。

ただ、「jQuery」ではあのメソッドで簡単にできたけど、ピュアJavaScript（Vanilla JS）で同じことをするにはどうしたらいいんだろう？　と思うことがあります。

先日は、ページ内にある要素を別の要素で囲む jQuery の $('#target').wrap('<div>'); 、つまり wrap メソッドをピュアJavaScript で実装するには、どうすればいいか悩んでしまいました。

やりたいこと

<!-- これを…… -->
<main id="target">ここを囲む</main>

<!-- こうしたい！ -->
<div>
  <main id="target">ここを囲む</main>
</div>

$('#target').wrap('<div>');

jQuery の wrap メソッドを使って簡単に実現できます。

let target = document.querySelector('#target');
target.outerHTML = `<div>${target.outerHTML}</div>`;

シンプルなので、見るだけで何をしているか理解できると思いますが、一応簡単に説明します。

まずは、囲みたい要素を取得して target に格納。

次に、target.outerHTML を使うことで、target 自身を別の HTML（「=」より右側の内容）で置き換えています。

outerHTML と似た名前のプロパティに innerHTML がありますが、innerHTML は自分を含まずに「子」を対象にして、outerHTML は自分自身も含むという違いがあります。

私の中であまり出番がなかった outerHTML ですが、こういうときに使うと便利ですね。