Как указать, между каких элементов будет создаваемый элемент?

Question

Как в JS задать порядковый номер создаваемого элемента?

var MainNavDiv = document.getElementsByClassName('main-navBar-entryPoints')[0];
var newLi = document.createElement("li");

И если в конце кода

  MainNavDiv.insertBefore(newLi, MainNavDiv.secondElementChild)

То он будет последним

Если

MainNavDiv.insertBefore(newD, MainNavDiv.firstElementChild)

То он будет первым

Но а как его воткнуть между, например, третьим и четвёртым?

Answer 1

Например так.

let li = document.querySelectorAll('#ul li');

let newLi = document.createElement('li');
newLi.style.background = 'red';
newLi.textContent = 'newLi';

li[3].after(newLi);

<ul id="ul">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Answer 2

В вашем коде используется несуществующий метод secondElementChild, в результате чего второй аргумент метода insertBefore равен undefined. На сайте MDN этот случай описан следующим образом:

В Mozilla Firefox, если referenceElement не задан или равен null, newElement вставляется в конец списка дочерних элементов.

В некоторых версиях браузеров результат может быть другим.

Возможный вариант исправления ошибки - использование свойства элемента children:

MainNavDiv.insertBefore(newLi, MainNavDiv.children[1])

БЛОГ НА HUSL

Как указать, между каких элементов будет создаваемый элемент?

Ответы (2 шт):