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

この記事は約2分で読めます。

コーディングのイメージ

こんにちは、さち です。

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

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

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

スポンサーリンク

やりたいこと

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

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

実装する方法

jQuery の場合

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

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

ピュアJavaScript の場合

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました