Как добавить перед последним итемом элемент?

Question

[dociaminal]

есть разметка

<div class="wrap">
  <div class="item">1</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">4</div>
  <div class="item">6</div>
</div>

как добавить перед последним элементом разметку?
<div class="item active">5</div>

через js

Answer 1

[0xD34F]

Куда и что надо добавить:

const wrapper = document.querySelector('.wrap');
const html = '<div class="item active">5</div>';

Как получить последний вложенный элемент:

const last = wrapper.lastElementChild;

// или

const last = wrapper.querySelector(':scope > :last-child');

// или

const last = wrapper.children[wrapper.children.length - 1];

// или

const [ last ] = Array.prototype.slice.call(wrapper.children, -1);

Добавляем:

last.insertAdjacentHTML('beforebegin', html);

// или

last.before(...new DOMParser().parseFromString(html, 'text/html').body.childNodes);

// или

wrapper.insertBefore(document.createRange().createContextualFragment(html), last);

// или

last.outerHTML = html + last.outerHTML;