[JavaScript] $.wrap()をピュアなJSで実装する方法

前提

<div class="piyo">こんにちは</div>

↑ これを<div>でラップして、↓ みたいにしたい。

<div>
  <div class="piyo">こんにちは</div>
</div>

jQuery

jQuery での実装方法を振り返り。

$.wrap()を使う

$(".piyo").wrap("<div />");

文字列を渡すしかないのか…。

JavaScript

イケてない方法

var piyo = document.querySelector(".piyo");
piyo = "<div>" + piyo.outerHTML + "</div>";

これはいけない…。個人的に文字列連結はナンセンス…。

ピュアな JavaScript で実装する

var piyo = document.querySelector(".piyo");
var div = document.createElement("div");
wrap(piyo, div);

// 関数
function wrap(element, wrapper) {
  element.parentNode.insertBefore(wrapper, element);
  wrapper.appendChild(element);
}

個人的には、これが最適解。


モダンブラウザであれば、wrap(element, wrapper)は以下のような実装も可能である。
before()が IE/Edge で未実装であるため、前述の方法が今のところ無難である。

function wrap(element, wrapper) {
  element.before(wrapper);
  wrapper.append(element);
}

関連