前提
<div class="piyo">こんにちは</div>
↑ これを<div>でラップして、↓ みたいにしたい。
<div>
<div class="piyo">こんにちは</div>
</div>
jQuery
jQuery での実装方法を振り返り。
$.wrap()を使う
$(".piyo").wrap("<div />");
$.wrapに文字列を渡す。
JavaScript
jQueryと同じ方法
var piyo = document.querySelector(".piyo");
piyo = "<div>" + piyo.outerHTML + "</div>";
要素ノードを作成する
var piyo = document.querySelector(".piyo");
var div = document.createElement("div");
// IEの場合
if (isIE) {
piyo.parentNode.insertBefore(div, piyo);
div.appendChild(piyo);
} else {
piyo.before(div);
div.append(piyo);
}
モダンブラウザであれば、before()が使えるため挿入は容易い。
ただ、before()は IE で未実装であるため考慮する必要がある。