前提

<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);
}

関連