JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<test>
  <f>1</f>
  <f>2</f>
  <f>4</f>
</test>

JavaScript

const test = document.querySelector('test');

function insert(parent, index, item) {
  if (index >= parent.children.length) {
    parent.appendChild(item)
  } else {
    parent.insertBefore(item, parent.children[index]);
  }
}

const f = (textContent) => Object.assign(document.createElement('f'), {
  textContent
})
console.log(test.childNodes)
insert(test, 3, f('third'))
insert(test, 0, f('first'))
insert(test, 3, f('second'))