Изменить случайные элементы в DOM (без jQuery)

Question

Я пытаюсь написать js для любой простой стороны html. Например, js должен выбрать все элементы img или p и поменять местами 2 случайных элемента одного типа, нажав кнопку.

let max = document.getElementsByTagName("img").length;
let min = 0;
let x1 = Math.round((Math.random() * (max - min)) + min);
let x2 = Math.round((Math.random() * (max - min)) + min);
let tmp1 = document.getElementsByTagName("img")[x1];
let tmp2 = document.getElementsByTagName("img")[x2];

это мои первые шаги, но я не знаю, как идти дальше. надеюсь, что кто-то может помочь

Answer 1

Для этого нужно использовать insertBefore.

let max = document.getElementsByTagName("div").length;
let min = 0;
let x1 = Math.round((Math.random() * (max - min)) + min);
let x2 = Math.round((Math.random() * (max - min)) + min);
let tmp1 = document.getElementsByTagName("div")[x1];
let tmp2 = document.getElementsByTagName("div")[x2];

// from here, do the changes
let wrapper = document.getElementById("wrapper"); // get wrapper reference
wrapper.insertBefore(tmp1, tmp2); // insert node before tmp1.
wrapper.insertBefore(tmp2, tmp1);

<div id="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>

Что следует отметить здесь,

1. Все предметы, которые вам нужно поменять, должны находиться под каким-то узлом. Вместо того, чтобы иметь их прямо под document, я создал узел-обертку и добавил его.
2. Чтобы сделать просмотр более легким, я добавил узлы как div, а не img. Но код должен работать точно так же.
3. Это просто для демонстрации insertBefore. Для правильной реализации вам нужно проверить nextSibling или previousSibling и сделать это с этими узлами.