ある要素の前に追加 insertBefore - JavaScript

指定要素の前に要素を追加するにはelement.insertBefore()を使う

element.insertBere(追加要素,  起点要素)

elementの中にある「起点要素」の前の位置に「追加要素」を追加する っていう感じ

実際にやってみた

sub2の前に要素(青い要素)を追加する

See the Pen 指定の要素の前に追加 by tamago (@tamago324) on CodePen.

<div class="main">
  <div class="sub default">sub1</div>
  <div class="sub default" id="ref">sub2</div>
  <div class="sub default">sub3</div>
</div>

// 親要素
const main = document.querySelector(".main");

// 追加要素の作成
const sub4 = document.createElement("div");
sub4.classList.add("sub", "add");

// 起点要素
const ref = document.querySelector("#ref");

main.insertBefore(sub4, ref);

mainの中にあるrefの前にsub4を追加

参考文献

• Javascript insertBefore | mediaevent.de