Применить для всех div

[Viher]

Есть код, который применяет действие только к одному блоку div (первому). Гуру по JavaScript, подскажите пожалуйста что сделать, чтобы при наведении курсора на элемент применялся цвет ко всем div, на который наводится курсор?

<div data-add-back-btn="">Блок 1</div>
<div data-add-back-btn="">Блок 2</div>
<div data-add-back-btn="">Блок 3</div>
...

<script>
var el = document.querySelector("div");
    el.addEventListener("mouseover", mouseOver);
    el.addEventListener("mouseout", mouseOut);

function mouseOver() {
    el.style.color = "red";
}

function mouseOut() {
    el.style.color = "black";
}
</script>

CSS не интересует!

[ruslan_mart]

function mouseEnter() {
    this.style.color = "red";
}
 
function mouseLeave() {
    this.style.color = "black";
}


var div = document.querySelectorAll('div');

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

function mouseHandler(e) {
    this.style.color = e.type === 'mouseenter' ?  'red' : 'black';
}

var div = document.querySelectorAll('div');

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

[Viher]

Спасибо, работает! Но, только для стиля CSS. Как сделать цикл для такой конструкции?

<div data-add-back-btn=""><p>Блок 1</p></div>
<div data-add-back-btn=""><p>Блок 1</p></div>
<div data-add-back-btn=""><p>Блок 1</p></div>

var x = document.querySelector("div"); 
    x.onmouseover = function() {this.insertAdjacentHTML('afterbegin', '<span>В div перед p</span>')};
    x.onmouseout = function() {this.removeChild(x.childNodes[0])};

Работает только для первого div. Пробовал цикл for, не получилось.

[ruslan_mart]

function mouseEnter() {
    this.insertAdjacentHTML('afterbegin', '<span>В div перед p</span>')
}
 
function mouseLeave() {
    this.removeChild(this.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);
}

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

div[data-add-back-btn]::before {
    content: 'В div перед p';
    display: none;
}
div[data-add-back-btn]:hover::before {
    display: inline;
}

[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т.

[ruslan_mart]

function mouseEnter() {
    var span = document.createElement('span');
    span.innerHTML = 'В div перед p';
    this.insertBefore(span, this.firstChild);
}
 
function mouseLeave() {
    this.removeChild(this.firstChild);
}


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);
}

[Viher]

Благодарю, это то что нужно.