脱jQuery .after() .before() .insertAfter() .appendTo() .prepend() .prependTo()

.after()

jQuery

$("#main").after($("#nav"));

書き換え JavaScript

document.getElementById("main").parentNode.insertBefore(document.getElementById("nav"), document.getElementById("main").nextElementSibling);

書き換え JavaScript（変数使用版）

var myMain = document.getElementById("main");
myMain.parentNode.insertBefore(document.getElementById("nav"), myMain.nextElementSibling);

.insertBefore は「前に置く」命令ですが、.nextElementSibling という1個先の兄弟要素を指定する命令を使い「後に置く」事を可能にします。

.before()

jQuery

$("#main").before($("#nav"));

書き換え JavaScript

document.getElementById("main").parentNode.insertBefore(document.getElementById("nav"), document.getElementById("main"));

書き換え JavaScript（変数使用版）

var myMain = document.getElementById("main");
myMain.parentNode.insertBefore(document.getElementById("nav"), myMain);

前回の insertBefore と逆の記述になります。 jQuery の .before() と .insertBefore() は中身が逆の関係です。

.insertAfter()

jQuery

$("#nav").insertAfter($("#main"));

書き換え JavaScript

document.getElementById("main").parentNode.insertBefore(document.getElementById("nav"), document.getElementById("main").nextElementSibling);

書き換え JavaScript（変数使用版）

var myMain = document.getElementById("main");
myMain.parentNode.insertBefore(document.getElementById("nav"), myMain.nextElementSibling);

jQuery の .after() と .insertAfter() は中身が逆の関係です。

.appendTo()

jQuery

$("#nav").appendTo($("#main"));

書き換え JavaScript

document.getElementById("main").appendChild(document.getElementById("nav"));

jQuery の .append() と .appendTo() も逆の関係でした。前回と一緒ですね。

.prepend()

jQuery

$("#main").prepend($("#nav"));

書き換え JavaScript

document.getElementById("main").parentNode.insertBefore(document.getElementById("nav"), document.getElementById("main").parentNode.firstElementChild);

書き換え JavaScript（変数使用版）

var myMainParent = document.getElementById("main").parentNode;
myMainParent.insertBefore(document.getElementById("nav"), myMainParent.firstElementChild);

親要素の一番初めに挿入する命令 .prepend() です。.insertBefore を用いて複雑ですが再現が可能です。

.prependTo()

jQuery

$("#nav").prependTo($("#main"));

書き換え JavaScript

document.getElementById("main").parentNode.insertBefore(document.getElementById("nav"), document.getElementById("main").parentNode.firstElementChild);

書き換え JavaScript（変数使用版）

var myMainParent = document.getElementById("main").parentNode;
myMainParent.insertBefore(document.getElementById("nav"), myMainParent.firstElementChild);

jQuery の prepend() と preoendTo() は中身が逆の関係でしたので、.preoend() の書き換えと逆になっているだけです。

ネイティブな JavaScript には .insertBefore と appendChild しか無いということは覚えておきましょう。この2つだけでも十分に任意の場所に挿入することが可能です。

まとめ