Почему div выводит свой скрипт?

Question

[AlexVVil]

Есть скрипт, он должен создать несколько div с картинками

<script>
var kolk1 = 10; 
var kolk1kolk1 = 1;
var div;
for (kolk1kolk1; kolk1kolk1 < kolk1 + 1; kolk1kolk1++) {
div = document.createElement('div');
div.innerHTML = '<img src=\"./skript/stro' + kolk1kolk1 +'.png\"/>';
document.querySelector('.sl8fad').appendChild(div);
}
</script>

Но перед 10 div он создаёт ещё один который содержит этот скрипт как text.

HTML

<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 118px; position: relative; right: 0px; top: 0px; z-index: 999; opacity: 1;"><div><script style="width: 100%; display: inline-block;">
												var kolk1 = 10; 
												var kolk1kolk1 = 1;
												var div;
												for (kolk1kolk1; kolk1kolk1 < kolk1 + 1; kolk1kolk1++) {
													div = document.createElement('div');
													div.innerHTML = '<img src=\"./skript/stro' + kolk1kolk1 +'.png\"/>';
													document.querySelector('.sl8fad').appendChild(div);
												}
											</script></div></div>

Comments

[AlexVVil]

Возможно это из-за slick, но я не понимаю почему

[Максим]

Почему вы помещаете <script> внутри div, да еще и стили ему задаете?? О_о

[Ярослав Иванов]

AlexVVil,
kolk1
kolk1kolk1
skript
sl8fad

Ясненько.

Answer 1

[FinGanapre]

Начните с этого. Вы очень усложняете задачу. И не стоит дёргать DOM десять раз, если в итоге вам нужно добавить туда все 10 div. Соберите их в массив и разок добавьте всё вместе.

В вашем текущем варианте вы и элемент куда добавлять каждый раз ищите, хотя он не меняется и каждый div туда добавляете по одному. Это не самый лучший вариант. Плюс, шаблонные строки намного удобнее в данном случае, чем простая конкатенация (склеивание через +).

Ещё момент. Не проще ли будет в вашем случае завести массив с нужными url или получать их откуда-то с сервера, чем склеивать строку и делать цикл на 10. Тогда вы просто используя map преобразуете это к нужному шаблону и выведите в нужное место.

код

<div class="div-container"></div>

const slidesContainer = document.querySelector('.div-container')
let i = 0
let slides = []

while ( i < 10) {
  slides.push(`
    <div>
      <img src="string-name${ i }.png"/>
    </div>
  `)
  
  i++
}

slidesContainer.insertAdjacentHTML(
  'beforeend',
  slides.join('')
)

Answer 2

[robprane]

Собственно вам уже написали в комментариях. Ваш скрипт размещен в div и представляет собой inline-block.