Top

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

jQuery には多くの移動用の命令がありますが、JavaScript には前回の2つ「insertBefore」「appendChild」しかありません。

詳しくは 脱jQuery その1 をご覧ください。

without-jquery

.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 を用いて複雑ですが再現が可能です。

.firstElementChild一番最初の子要素を取得する命令です。一番最初の子要素の前に挿入すればOKなのでそのような書き方になってます。

.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つだけでも十分に任意の場所に挿入することが可能です。

まとめ

jQueryJavaScript
A.after(B)A.parentNode.insertBefore(B, A.nextElementSibling)
A.before(B)A.parentNode.insertBefore(B, A)
A.insertAfter(B)B.parentNode.insertBefore(A, B.nextElementSibling)
A.appendTo(B)B.appendChild(A)
A.prepend(B)A.parentNode.insertBefore(B, A.parentNode.firstElementChild)
A.prependTo(B)B.parentNode.insertBefore(A, B.parentNode.firstElementChild)