脱jQuery .replaceWith() .replaceAll() .wrap() .wrapInner()

.replaceWith()

jQuery

$("#main").replaceWith("<span>置き換え</span>")

書き換え JavaScript

var myMain = document.getElementById("main");
var change = document.createElement("span");
change.textContent = "置き換え";
myMain.parentNode.replaceChild(change,myMain);

.replaceChild は子供要素を交換する命令です。JavaScript では要素そのものを入れ替える命令はないので、.parentNode で親を指定して子供を入れ替えます。

.replaceAll()

jQuery

$("<span>置き換え</span>").replaceAll("#main")

書き換え JavaScript

var myMain = document.getElementById("main");
var change = document.createElement("span");
change.textContent = "置き換え";
myMain.parentNode.replaceChild(change,myMain);

jQuery の .replaceWith() と .replaceAll() は中身の指定が逆なだけなので書き換えは .replaceWith() と変わりません。

$("<span>置き換え</span>") の中身をもっと複雑なものにしたい場合は前回の記事を参考にしてください。

参考：$("<div class='hello'>Hello</div>")

.wrap()

jQuery

$("#main").wrap("<div></div>")

書き換え JavaScript

var myMain = document.getElementById("main");
myMain.outerHTML = "<div>" + myMain.outerHTML + "</div>";

.wrap() は指定要素で周りを囲む命令です。この例では #main を div で囲います。 innerHTML の影に隠れてあまり使われませんが .outerHTML を使います。

.innerHTML と .outerHTML の違い。

<div id="header"><span>その1</span><span>その2</span></div> //赤字が #header の.innerHTML
<div id="header"><span>その1</span><span>その2</span></div> //青字が #header の.outerHTML

名前の通り .innerHTML は「内部」を取得します。.outerHTML は「外部」というよりは選択した要素まで含めて全てを取得します。

.outerHTML を利用することで .wrap() の書き換えが簡単に可能です。全体を "<div>" と "</div>" で囲めばOKです。outerHTML を使わない書き換えも可能ですが、これが一番シンプルだと思います。

.wrapInner()

jQuery

$("#main").wrapInner("<div></div>")

書き換え JavaScript

var myMain = document.getElementById("main");
myMain.innerHTML = "<div>" + myMain.innerHTML + "</div>";

.wrapInner() は 子供要素を指定した要素で囲む命令です。先程は全体を囲むので .outerHTML を使いましたが、今度は内側を囲むので .innerHTML を使えばOKです。

まとめ