脱jQuery .insertBefore() .append()

.insertBefore()

#main の前に #before が挿入されます。

jQuery（id の場合）

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

書き換え JavaScript（id の場合）

document.getElementById("main").parentNode.insertBefore(document.getElementById("before"), document.getElementById("main"))

main が JavaScript の方には2つ書いてありますが、JavaScript の方は少し癖があって、親を指定してあげなくてはいけません。.parentNode が「親」を指定する命令です。

「document.getElementById("main")」と同じ記述が2つあるので、これらを変数に入れて書くのが一般的です。

書き換え JavaScript（id の場合、変数使用版）

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

次は、挿入する場所が class で複数の場所に .before の2番目を挿入する場合です。

jQuery（class の場合）

$(".before").eq(2).insertBefore($(".nav"));

書き換え JavaScript（class の場合）

var myNav = document.getElementsByClassName("nav");
var myBefore = document.getElementsByClassName("before")[2];
for (var i = 0; i < myNav.length; i++) {
    myNav[i].parentNode.insertBefore(myBefore.cloneNode(true), myNav[i])
}

複数の .nav に .before を挿入します。複数ですので for で総当たりです。

正確な書き換えではありませんが、取り敢えずこの方式が一般的です。jQuery は元々要素として存在していた .before の2番目はなくなりますが、この JavaScript コードではなくなりません。もっと正確に書き換える場合は元々存在する要素を消す必要がありますが、それに関しては jQuery .remove() の書き換えで紹介しますのでここでは割愛します。

複数 .before を作り出す必要があるので .cloneNode(true) をつかい複製します。複製することで何個でも挿入することが出来ます。for をつかい .nav の個数だけ総当りします。

「$("<p>こんにちは</p>").inserBefore($("#main"))」のパターンもあるのですが、これに関しては 「$("<div class='hello'>Hello</div>")」で紹介します。

.append()

つづいて .append() です。

jQuery（id の場合）

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

書き換え JavaScript（id の場合）

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

.append ⇒ .appendChild で書き換えが可能です。JavaScript の方は child という記述増えています。

次は class の場合。複数ある .header に .nav の2番目を挿入します。

jQuery（class の場合）

$(".header").append($(".nav").eq(1));

書き換え JavaScript（class の場合）

var myHeader = document.getElementsByClassName("header");
var myNav = document.getElementsByClassName("nav")[1];
for (var i = 0; i < myHeader.length; i++) {
    myHeader[i].appendChild(myNav.cloneNode(true))
}

class になると一気に複雑になります。やはり jQuery は便利ですね。前述の .insertBefore と同様正確な書き換えではありません。複製するために .cloneNode(true) を使います。

class for で総当りが複雑ですが、基本は id での書き換えを全体化しただけです。

まとめ