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

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]

Почему у блоков отсутствует общий класс? - добавьте, пусть будет class="banner".

Кого и куда надо переместить:

const containers = document.querySelectorAll('.products--container');
const items = [...document.querySelectorAll('.banner')];

Перемещаем:

for (const n of containers) {
  n.appendChild(items.splice(Math.random() * items.length | 0, 1)[0]);
}

или

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

containers.forEach((n, i) => n.append(items[i]));