Как вставить элемент перед 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.prepend(elems[i].cloneNode(true));
// или
divParent.insertAdjacentElement('afterbegin', elems[i].cloneNode(true));

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

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

Comments

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

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

[Анатолий]

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

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