[Viher]

function mouseEnter() {
this.insertAdjacentHTML('afterbegin', '<span>В div перед p</span>')
}

function mouseLeave() {
this.removeChild(x.childNodes[0])
}


var div = document.querySelectorAll('div[data-add-back-btn]');

for(var i = 0; i < div.length; i++) {
div[i].addEventListener('mouseenter', mouseEnter);
div[i].addEventListener('mouseleave', mouseLeave);
}

Такой способ я уже пробовал, <span>В div перед p</span> - будет добавляться бесконечно. Возможно через оператор else с braek можно как то сделать, не знаю как. И еще, метод removeChild не срабатывает, если у брать курсор от div'а, код HTML

<span>В div перед p</span>

не исчезает.

P.S.: то что Вы хотите реализовать - можно сделать с помощью CSS.

Я пытаюсь сделать активный блок, где

<span>В div перед p</span>

будет применяться только к текущему div. т.е. в котором появился код <span>В div перед p</span>. По другому мне для каждого div, потребуется присваивать уникальный идентификатор. И писать js-скрипт под каждый идентификатор, а их 50т.