Как случайным образом добавлять элемент?

Question

[kamisarlapsha]

Привет! Есть три блока

<div id="banner11"> <div id="banner12"> <div id="banner13">

. Они добавляются к другим трём блокам products--container.
Добавляются так:

$('#banner11').appendTo($('.products--container:nth-child(1)'));
    $('#banner12').appendTo($('.products--container:nth-child(2)'));
    $('#banner13').appendTo($('.products--container:nth-child(3)'));

Код получается таким:

<div class="products--container"><div id="banner11"></div></div>
<div class="products--container"><div id="banner12"></div></div>
<div class="products--container"><div id="banner13"></div></div>

Вопрос, как добавлять эти блоки каждый раз по разному, случайным образом ? Например, что было так:

<div class="products--container"><div id="banner12"></div></div>
<div class="products--container"><div id="banner11"></div></div>
<div class="products--container"><div id="banner13"></div></div>

А при обновлении страницы уже так:

<div class="products--container"><div id="banner13"></div></div>
<div class="products--container"><div id="banner11"></div></div>
<div class="products--container"><div id="banner12"></div></div>

Заранее спасибо!

Answer 1

[0xD34F]

Почему у блоков отсутствует общий класс? - добавьте.

const banners = [...document.querySelectorAll('.banner')];

for (let i = banners.length; --i > 0;) {
  const j = Math.random() * (i + 1) | 0;
  [ banners[i], banners[j] ] = [ banners[j], banners[i] ];
}

document.querySelectorAll('.products--container').forEach((n, i) => n.appendChild(banners[i]));