DOM操作について。インデックス指定でノード挿入ってできないのでしょうか？

Question

<div id="wrapp">
  <div class="cl1">AAA</div>
  <div class="cl2">BBB</div>
  <div class="cl3">CCC</div>
</div>

例えばクラスcl1とcl2の間に<div class="clx">XXX</div>という要素を追加したいときはどうしたらいいでしょうか？
#wrapp子要素の先頭や末尾にノード追加は出来ますが、
ずばりインデックス番号を指定してノード追加って出来ないんですか？

Answer 1

.cl1の後か.cl2の前にinsertAdjacentElementすれば追加できます。

【Element.insertAdjacentElement() - Web APIs | MDN】
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

---

何番目、みたいな差し込み方をしたければ:nth-child()で取得してその前とか後ろとかすればできます。

【:nth-child() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

Answer 2

以下のような関数を作成するのはどうでしょうか？

function insertInnerElement(parent, elem, index) {
  let children = parent.children;
  let beforeElem = children[index];
  parent.insertBefore(elem, beforeElem);
}

使い方

function insertInnerElement(parent, elem, index) {
  let children = parent.children;
  let beforeElem = children[index];
  parent.insertBefore(elem, beforeElem);
}

window.addEventListener('DOMContentLoaded', (event) => {
  let elem = document.createElement("div");
  elem.innerText = 'INSERTED';
  let parent = document.getElementById("wrapp")
  insertInnerElement(parent, elem, 1); // elemをAAAとBBBの間(index = 1)に挿入
});

Answer 3

クラスcl1とcl2の間に<div class="clx">XXX</div>という要素を追加したいときはどうしたらいいでしょうか？

<div class="cl2">を取得して、insertBeforeの引数にそれを指定すれば可能です。

Answer 4

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const template = document.createElement("template");
  template.innerHTML= `<div class="clx">XXX</div>`;
  const clone = template.content.cloneNode(true);
  document.querySelector('#wrapp').insertBefore(clone,document.querySelector('.cl2'));
});
</script>

<div id="wrapp">
  <div class="cl1">AAA</div>
  <div class="cl2">BBB</div>
  <div class="cl3">CCC</div>
</div>