Как вставить HTML-код во все блоки с указанным классом?

Question

Как вставить html-код во все блоки с указанным классом seria-choose-row?

let target = document.querySelector('.seria-choose-row');
target.insertAdjacentHTML('afterBegin', '<div class="swiper-button-next"></div><div class="swiper-button-prev"></div>');

.swiper-button-next {
  width: 30px;
  height: 30px;
  background: red;
}
.swiper-button-prev {
  width: 30px;
  height: 30px;
  background: green;
}
.seria-choose-row {
  padding: 20px;
  border: 1px solid black;
  margin-bottom: 10px;
}

<div class="seria-choose-row one">

</div>

<div class="seria-choose-row two">

</div>

<div class="seria-choose-row three">

</div>

Answer 1

Вам нужно получить NodeList используя querySelectorAll, используя forEach добавить необходимый Вам код. Например:

const elements = document.querySelectorAll('.seria-choose-row');

elements.forEach(element => element.insertAdjacentHTML('afterBegin', '<div class="swiper-button-next"></div><div class="swiper-button-prev"></div>'));

.swiper-button-next {
  width: 30px;
  height: 30px;
  background: red;
}
.swiper-button-prev {
  width: 30px;
  height: 30px;
  background: green;
}
.seria-choose-row {
  padding: 20px;
  border: 1px solid black;
  margin-bottom: 10px;
}

<div class="seria-choose-row one">

</div>

<div class="seria-choose-row two">

</div>

<div class="seria-choose-row three">

</div>

Как справедливо было замечено в комментарии, если важна более широкая поддержка браузерами, то можно сделать таким образом:

var elements = document.querySelectorAll('.seria-choose-row'), i;

for (i = 0; i < elements.length; ++i) {
  elements[i].insertAdjacentHTML('afterBegin', '<div class="swiper-button-next"></div><div class="swiper-button-prev"></div>')
}

.swiper-button-next {
  width: 30px;
  height: 30px;
  background: red;
}
.swiper-button-prev {
  width: 30px;
  height: 30px;
  background: green;
}
.seria-choose-row {
  padding: 20px;
  border: 1px solid black;
  margin-bottom: 10px;
}

<div class="seria-choose-row one">

</div>

<div class="seria-choose-row two">

</div>

<div class="seria-choose-row three">

</div>

БЛОГ НА HUSL

Как вставить HTML-код во все блоки с указанным классом?

Ответы (1 шт):