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

Question

[Анатолий]

Как elems[i] поставить перед innerHTML?

<div class="basic">Hello world!</div>
<div class="basic">Hello world!</div>
<div class="basic">Hello world!</div>

<script>
	var elems = document.querySelectorAll('.basic');
	for(var i = 0; i < elems.length; i++) {
		var divParent = document.createElement('div');
		divParent.className = 'parent';
		divParent.innerHTML = '<b>Важная строка</b>';
		// Этот элемент нужно поставить переде innerHTML
                divParent.insertBefore(elems[i].cloneNode(true), null);
		elems[i].replaceWith(divParent);
	}
</script>

Сейчас порядок элементов:

<div class="parent">
  <b>Важная строка</b>
  <div class="basic">Hello world!</div>
</div>

Нужно:

<div class="parent">
  <div class="basic">Hello world!</div>
  <b>Важная строка</b>
</div>

Answer 1

[0xD34F]

Замените

divParent.insertBefore(elems[i].cloneNode(true), null);

на

divParent.insertBefore(elems[i].cloneNode(true), divParent.firstChild);
// или
divParent.insertAdjacentElement('afterbegin', elems[i].cloneNode(true));
// или
divParent.prepend(elems[i].cloneNode(true));

А вообще, можно и без клонирования сделать:

for (const n of document.querySelectorAll('.basic')) {
  n.after(document.createElement('div'));
  n.nextSibling.classList.add('parent');
  n.nextSibling.innerHTML = '<b>Важная строка</b>';
  n.nextSibling.prepend(n);
}

Ещё вариант - можно собирать разметку вместо создания элементов напрямую:

document.querySelectorAll('.basic').forEach(n => {
  const html = `
    <div class="parent">
      ${n.outerHTML}
      <b>Важная строка</b>
    </div>
  `;

  n.outerHTML = html;
  // или
  n.insertAdjacentHTML('afterend', html);
  n.remove();
  // или
  n.replaceWith(document.createRange().createContextualFragment(html));
  // или
  n.replaceWith(...new DOMParser().parseFromString(html, 'text/html').body.childNodes);
});

Comments

[Алексей Уколов]

В IE prepend() не работает, нужен полифил.

[Анатолий]

Алексей Уколов, мне и не надо для IE.
Кроме того вроде так работает:

divParent.insertBefore(elems[i].cloneNode(true),divParent.firstChild);